Mixing
datepicker changes dates when december is reached
1
here you can see a datepicker I want to use.
There is an error clicking on next month - if december is reached click still changes dates and title of month keeps unchanged.
After that click on prev month - first click has the same bug.
I tried with 1, 11 and 13 inside if(currPage > 0) and if(currPage < 12) - without success.
Any help?
javascript jquery
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
add a comment |
1
here you can see a datepicker I want to use.
There is an error clicking on next month - if december is reached click still changes dates and title of month keeps unchanged.
After that click on prev month - first click has the same bug.
I tried with 1, 11 and 13 inside if(currPage > 0) and if(currPage < 12) - without success.
Any help?
javascript jquery
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
add a comment |
1
1
1
here you can see a datepicker I want to use.
There is an error clicking on next month - if december is reached click still changes dates and title of month keeps unchanged.
After that click on prev month - first click has the same bug.
I tried with 1, 11 and 13 inside if(currPage > 0) and if(currPage < 12) - without success.
Any help?
javascript jquery
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
here you can see a datepicker I want to use.
There is an error clicking on next month - if december is reached click still changes dates and title of month keeps unchanged.
After that click on prev month - first click has the same bug.
I tried with 1, 11 and 13 inside if(currPage > 0) and if(currPage < 12) - without success.
Any help?
javascript jquery
javascript jquery
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
edited Jan 2 at 20:00
Moinul Hossain
1,4491929
1,4491929
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
asked Jan 2 at 19:18
qadenzaqadenza
3,014103762
3,014103762
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
Check if thats what you expected. You should set <11 condition there, not <12. Since you reached 12th month (11th index) you were able to trigger function one more time and increase index.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY DATEPICKER</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>
<style type="text/css">
</style>
<script type="text/javascript">
var currPage = 0; //month
var year ;
var day;
function getVal(e)
{
//lert(document.getElementById(e.id).value);
day = document.getElementById(e.id).value;
document.getElementById("waha").value = year +"/"+ (currPage + 1) + "/" + day ;
}
$(document).ready(function(){
$("#waha").focus(function()
{
getDays(0);
$("#datepicker").css("display"," block");
}
);
$("#next-month").click(function(){
if(currPage < 11)
{
currPage = currPage+1;
getDays(currPage);
}
});
$("#prev-month").click(function(){
if(currPage > 0)
{
currPage = currPage-1;
getDays(currPage);
}
});
$("#next-y").click(function(){
$("#year").text( parseInt($("#year").text()) + 1 ) ;
getDays(currPage);
});
$("#prev-y").click(function(){
$("#year").text( parseInt($("#year").text()) - 1 ) ;
getDays(currPage);
});
function getDays(month)
{
$("#dt-able").empty();
var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
year = parseInt($("#year").text());
$("#month-title").html(mos[month]);
$("#dt-able").append('<tr>');
for(i = 0; i < 7; i++)
{
$('#dt-able').append("<td id='dt-head'>" + day[i] + "</td>");
}
$("#dt-able").append('</td>');
var firstDay = new Date(year,month, 1);
var lastDay = new Date(year, month+1, 0);
var offset = firstDay.getDay();
var dayCount = 1;
for (i = 0; i < 5; i++)
{
$('#dt-able').append("<tr id=row-"+ i +">");
for(rw = 0; rw < 7; rw++ )
{
if(offset == 0)
{
$('#' + "row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>"
+ "<input type='button' id ='day_val" +dayCount +"'"+ " onclick='getVal(this)' value= '" + dayCount + "' >" +
'</td>' );
if(dayCount >= lastDay.getDate())
{
break;
}
dayCount++;
}else
{
$('#' + "row-"+ i).append('<td>' +'</td>' );
offset--;
}
}
$('#dt-able').append('</tr>');
}
}
});
</script>
</head>
<body>
<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
<input type="button" name="prev-y" value="Prev Year" id="prev-y" ">
<span id="year">2017</span>
<input type="button" name="next-y" value="Next Year" id="next-y" ">
<table id="dt-able" >
<td class="day_val"> </td>
</table>
<input type="button" name="prev" value="Prev Mo" id="prev-month" ">
<input type="button" name="next" value="Next Mo" id="next-month" ">
</div>
</body>
</html>answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
1
it works, thanks a lot
– qadenza
Jan 2 at 19:30
add a comment |
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011994%2fdatepicker-changes-dates-when-december-is-reached%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Check if thats what you expected. You should set <11 condition there, not <12. Since you reached 12th month (11th index) you were able to trigger function one more time and increase index.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY DATEPICKER</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>
<style type="text/css">
</style>
<script type="text/javascript">
var currPage = 0; //month
var year ;
var day;
function getVal(e)
{
//lert(document.getElementById(e.id).value);
day = document.getElementById(e.id).value;
document.getElementById("waha").value = year +"/"+ (currPage + 1) + "/" + day ;
}
$(document).ready(function(){
$("#waha").focus(function()
{
getDays(0);
$("#datepicker").css("display"," block");
}
);
$("#next-month").click(function(){
if(currPage < 11)
{
currPage = currPage+1;
getDays(currPage);
}
});
$("#prev-month").click(function(){
if(currPage > 0)
{
currPage = currPage-1;
getDays(currPage);
}
});
$("#next-y").click(function(){
$("#year").text( parseInt($("#year").text()) + 1 ) ;
getDays(currPage);
});
$("#prev-y").click(function(){
$("#year").text( parseInt($("#year").text()) - 1 ) ;
getDays(currPage);
});
function getDays(month)
{
$("#dt-able").empty();
var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
year = parseInt($("#year").text());
$("#month-title").html(mos[month]);
$("#dt-able").append('<tr>');
for(i = 0; i < 7; i++)
{
$('#dt-able').append("<td id='dt-head'>" + day[i] + "</td>");
}
$("#dt-able").append('</td>');
var firstDay = new Date(year,month, 1);
var lastDay = new Date(year, month+1, 0);
var offset = firstDay.getDay();
var dayCount = 1;
for (i = 0; i < 5; i++)
{
$('#dt-able').append("<tr id=row-"+ i +">");
for(rw = 0; rw < 7; rw++ )
{
if(offset == 0)
{
$('#' + "row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>"
+ "<input type='button' id ='day_val" +dayCount +"'"+ " onclick='getVal(this)' value= '" + dayCount + "' >" +
'</td>' );
if(dayCount >= lastDay.getDate())
{
break;
}
dayCount++;
}else
{
$('#' + "row-"+ i).append('<td>' +'</td>' );
offset--;
}
}
$('#dt-able').append('</tr>');
}
}
});
</script>
</head>
<body>
<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
<input type="button" name="prev-y" value="Prev Year" id="prev-y" ">
<span id="year">2017</span>
<input type="button" name="next-y" value="Next Year" id="next-y" ">
<table id="dt-able" >
<td class="day_val"> </td>
</table>
<input type="button" name="prev" value="Prev Mo" id="prev-month" ">
<input type="button" name="next" value="Next Mo" id="next-month" ">
</div>
</body>
</html>answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
1
it works, thanks a lot
– qadenza
Jan 2 at 19:30
add a comment |
2
Check if thats what you expected. You should set <11 condition there, not <12. Since you reached 12th month (11th index) you were able to trigger function one more time and increase index.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY DATEPICKER</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>
<style type="text/css">
</style>
<script type="text/javascript">
var currPage = 0; //month
var year ;
var day;
function getVal(e)
{
//lert(document.getElementById(e.id).value);
day = document.getElementById(e.id).value;
document.getElementById("waha").value = year +"/"+ (currPage + 1) + "/" + day ;
}
$(document).ready(function(){
$("#waha").focus(function()
{
getDays(0);
$("#datepicker").css("display"," block");
}
);
$("#next-month").click(function(){
if(currPage < 11)
{
currPage = currPage+1;
getDays(currPage);
}
});
$("#prev-month").click(function(){
if(currPage > 0)
{
currPage = currPage-1;
getDays(currPage);
}
});
$("#next-y").click(function(){
$("#year").text( parseInt($("#year").text()) + 1 ) ;
getDays(currPage);
});
$("#prev-y").click(function(){
$("#year").text( parseInt($("#year").text()) - 1 ) ;
getDays(currPage);
});
function getDays(month)
{
$("#dt-able").empty();
var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
year = parseInt($("#year").text());
$("#month-title").html(mos[month]);
$("#dt-able").append('<tr>');
for(i = 0; i < 7; i++)
{
$('#dt-able').append("<td id='dt-head'>" + day[i] + "</td>");
}
$("#dt-able").append('</td>');
var firstDay = new Date(year,month, 1);
var lastDay = new Date(year, month+1, 0);
var offset = firstDay.getDay();
var dayCount = 1;
for (i = 0; i < 5; i++)
{
$('#dt-able').append("<tr id=row-"+ i +">");
for(rw = 0; rw < 7; rw++ )
{
if(offset == 0)
{
$('#' + "row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>"
+ "<input type='button' id ='day_val" +dayCount +"'"+ " onclick='getVal(this)' value= '" + dayCount + "' >" +
'</td>' );
if(dayCount >= lastDay.getDate())
{
break;
}
dayCount++;
}else
{
$('#' + "row-"+ i).append('<td>' +'</td>' );
offset--;
}
}
$('#dt-able').append('</tr>');
}
}
});
</script>
</head>
<body>
<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
<input type="button" name="prev-y" value="Prev Year" id="prev-y" ">
<span id="year">2017</span>
<input type="button" name="next-y" value="Next Year" id="next-y" ">
<table id="dt-able" >
<td class="day_val"> </td>
</table>
<input type="button" name="prev" value="Prev Mo" id="prev-month" ">
<input type="button" name="next" value="Next Mo" id="next-month" ">
</div>
</body>
</html>answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
1
it works, thanks a lot
– qadenza
Jan 2 at 19:30
add a comment |
2
2
2
Check if thats what you expected. You should set <11 condition there, not <12. Since you reached 12th month (11th index) you were able to trigger function one more time and increase index.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY DATEPICKER</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>
<style type="text/css">
</style>
<script type="text/javascript">
var currPage = 0; //month
var year ;
var day;
function getVal(e)
{
//lert(document.getElementById(e.id).value);
day = document.getElementById(e.id).value;
document.getElementById("waha").value = year +"/"+ (currPage + 1) + "/" + day ;
}
$(document).ready(function(){
$("#waha").focus(function()
{
getDays(0);
$("#datepicker").css("display"," block");
}
);
$("#next-month").click(function(){
if(currPage < 11)
{
currPage = currPage+1;
getDays(currPage);
}
});
$("#prev-month").click(function(){
if(currPage > 0)
{
currPage = currPage-1;
getDays(currPage);
}
});
$("#next-y").click(function(){
$("#year").text( parseInt($("#year").text()) + 1 ) ;
getDays(currPage);
});
$("#prev-y").click(function(){
$("#year").text( parseInt($("#year").text()) - 1 ) ;
getDays(currPage);
});
function getDays(month)
{
$("#dt-able").empty();
var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
year = parseInt($("#year").text());
$("#month-title").html(mos[month]);
$("#dt-able").append('<tr>');
for(i = 0; i < 7; i++)
{
$('#dt-able').append("<td id='dt-head'>" + day[i] + "</td>");
}
$("#dt-able").append('</td>');
var firstDay = new Date(year,month, 1);
var lastDay = new Date(year, month+1, 0);
var offset = firstDay.getDay();
var dayCount = 1;
for (i = 0; i < 5; i++)
{
$('#dt-able').append("<tr id=row-"+ i +">");
for(rw = 0; rw < 7; rw++ )
{
if(offset == 0)
{
$('#' + "row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>"
+ "<input type='button' id ='day_val" +dayCount +"'"+ " onclick='getVal(this)' value= '" + dayCount + "' >" +
'</td>' );
if(dayCount >= lastDay.getDate())
{
break;
}
dayCount++;
}else
{
$('#' + "row-"+ i).append('<td>' +'</td>' );
offset--;
}
}
$('#dt-able').append('</tr>');
}
}
});
</script>
</head>
<body>
<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
<input type="button" name="prev-y" value="Prev Year" id="prev-y" ">
<span id="year">2017</span>
<input type="button" name="next-y" value="Next Year" id="next-y" ">
<table id="dt-able" >
<td class="day_val"> </td>
</table>
<input type="button" name="prev" value="Prev Mo" id="prev-month" ">
<input type="button" name="next" value="Next Mo" id="next-month" ">
</div>
</body>
</html>answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
Check if thats what you expected. You should set <11 condition there, not <12. Since you reached 12th month (11th index) you were able to trigger function one more time and increase index.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY DATEPICKER</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>
<style type="text/css">
</style>
<script type="text/javascript">
var currPage = 0; //month
var year ;
var day;
function getVal(e)
{
//lert(document.getElementById(e.id).value);
day = document.getElementById(e.id).value;
document.getElementById("waha").value = year +"/"+ (currPage + 1) + "/" + day ;
}
$(document).ready(function(){
$("#waha").focus(function()
{
getDays(0);
$("#datepicker").css("display"," block");
}
);
$("#next-month").click(function(){
if(currPage < 11)
{
currPage = currPage+1;
getDays(currPage);
}
});
$("#prev-month").click(function(){
if(currPage > 0)
{
currPage = currPage-1;
getDays(currPage);
}
});
$("#next-y").click(function(){
$("#year").text( parseInt($("#year").text()) + 1 ) ;
getDays(currPage);
});
$("#prev-y").click(function(){
$("#year").text( parseInt($("#year").text()) - 1 ) ;
getDays(currPage);
});
function getDays(month)
{
$("#dt-able").empty();
var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
year = parseInt($("#year").text());
$("#month-title").html(mos[month]);
$("#dt-able").append('<tr>');
for(i = 0; i < 7; i++)
{
$('#dt-able').append("<td id='dt-head'>" + day[i] + "</td>");
}
$("#dt-able").append('</td>');
var firstDay = new Date(year,month, 1);
var lastDay = new Date(year, month+1, 0);
var offset = firstDay.getDay();
var dayCount = 1;
for (i = 0; i < 5; i++)
{
$('#dt-able').append("<tr id=row-"+ i +">");
for(rw = 0; rw < 7; rw++ )
{
if(offset == 0)
{
$('#' + "row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>"
+ "<input type='button' id ='day_val" +dayCount +"'"+ " onclick='getVal(this)' value= '" + dayCount + "' >" +
'</td>' );
if(dayCount >= lastDay.getDate())
{
break;
}
dayCount++;
}else
{
$('#' + "row-"+ i).append('<td>' +'</td>' );
offset--;
}
}
$('#dt-able').append('</tr>');
}
}
});
</script>
</head>
<body>
<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
<input type="button" name="prev-y" value="Prev Year" id="prev-y" ">
<span id="year">2017</span>
<input type="button" name="next-y" value="Next Year" id="next-y" ">
<table id="dt-able" >
<td class="day_val"> </td>
</table>
<input type="button" name="prev" value="Prev Mo" id="prev-month" ">
<input type="button" name="next" value="Next Mo" id="next-month" ">
</div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY DATEPICKER</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>
<style type="text/css">
</style>
<script type="text/javascript">
var currPage = 0; //month
var year ;
var day;
function getVal(e)
{
//lert(document.getElementById(e.id).value);
day = document.getElementById(e.id).value;
document.getElementById("waha").value = year +"/"+ (currPage + 1) + "/" + day ;
}
$(document).ready(function(){
$("#waha").focus(function()
{
getDays(0);
$("#datepicker").css("display"," block");
}
);
$("#next-month").click(function(){
if(currPage < 11)
{
currPage = currPage+1;
getDays(currPage);
}
});
$("#prev-month").click(function(){
if(currPage > 0)
{
currPage = currPage-1;
getDays(currPage);
}
});
$("#next-y").click(function(){
$("#year").text( parseInt($("#year").text()) + 1 ) ;
getDays(currPage);
});
$("#prev-y").click(function(){
$("#year").text( parseInt($("#year").text()) - 1 ) ;
getDays(currPage);
});
function getDays(month)
{
$("#dt-able").empty();
var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
year = parseInt($("#year").text());
$("#month-title").html(mos[month]);
$("#dt-able").append('<tr>');
for(i = 0; i < 7; i++)
{
$('#dt-able').append("<td id='dt-head'>" + day[i] + "</td>");
}
$("#dt-able").append('</td>');
var firstDay = new Date(year,month, 1);
var lastDay = new Date(year, month+1, 0);
var offset = firstDay.getDay();
var dayCount = 1;
for (i = 0; i < 5; i++)
{
$('#dt-able').append("<tr id=row-"+ i +">");
for(rw = 0; rw < 7; rw++ )
{
if(offset == 0)
{
$('#' + "row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>"
+ "<input type='button' id ='day_val" +dayCount +"'"+ " onclick='getVal(this)' value= '" + dayCount + "' >" +
'</td>' );
if(dayCount >= lastDay.getDate())
{
break;
}
dayCount++;
}else
{
$('#' + "row-"+ i).append('<td>' +'</td>' );
offset--;
}
}
$('#dt-able').append('</tr>');
}
}
});
</script>
</head>
<body>
<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
<input type="button" name="prev-y" value="Prev Year" id="prev-y" ">
<span id="year">2017</span>
<input type="button" name="next-y" value="Next Year" id="next-y" ">
<table id="dt-able" >
<td class="day_val"> </td>
</table>
<input type="button" name="prev" value="Prev Mo" id="prev-month" ">
<input type="button" name="next" value="Next Mo" id="next-month" ">
</div>
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY DATEPICKER</title>
<script src="https://code.jquery.com/jquery-3.2.1.js" type="text/javascript" > </script>
<style type="text/css">
</style>
<script type="text/javascript">
var currPage = 0; //month
var year ;
var day;
function getVal(e)
{
//lert(document.getElementById(e.id).value);
day = document.getElementById(e.id).value;
document.getElementById("waha").value = year +"/"+ (currPage + 1) + "/" + day ;
}
$(document).ready(function(){
$("#waha").focus(function()
{
getDays(0);
$("#datepicker").css("display"," block");
}
);
$("#next-month").click(function(){
if(currPage < 11)
{
currPage = currPage+1;
getDays(currPage);
}
});
$("#prev-month").click(function(){
if(currPage > 0)
{
currPage = currPage-1;
getDays(currPage);
}
});
$("#next-y").click(function(){
$("#year").text( parseInt($("#year").text()) + 1 ) ;
getDays(currPage);
});
$("#prev-y").click(function(){
$("#year").text( parseInt($("#year").text()) - 1 ) ;
getDays(currPage);
});
function getDays(month)
{
$("#dt-able").empty();
var mos=['January','February','March','April','May','June','July','August','September','October','Novemeber','Decemeber']
var day=['Sun', 'Mon', 'Tue', 'Wed' , 'Thu', 'Fri', 'Sat']
year = parseInt($("#year").text());
$("#month-title").html(mos[month]);
$("#dt-able").append('<tr>');
for(i = 0; i < 7; i++)
{
$('#dt-able').append("<td id='dt-head'>" + day[i] + "</td>");
}
$("#dt-able").append('</td>');
var firstDay = new Date(year,month, 1);
var lastDay = new Date(year, month+1, 0);
var offset = firstDay.getDay();
var dayCount = 1;
for (i = 0; i < 5; i++)
{
$('#dt-able').append("<tr id=row-"+ i +">");
for(rw = 0; rw < 7; rw++ )
{
if(offset == 0)
{
$('#' + "row-"+ i).append("<td id='" + "cell-" + dayCount+ "'>"
+ "<input type='button' id ='day_val" +dayCount +"'"+ " onclick='getVal(this)' value= '" + dayCount + "' >" +
'</td>' );
if(dayCount >= lastDay.getDate())
{
break;
}
dayCount++;
}else
{
$('#' + "row-"+ i).append('<td>' +'</td>' );
offset--;
}
}
$('#dt-able').append('</tr>');
}
}
});
</script>
</head>
<body>
<input type="text" id="waha" >
<div id="datepicker" style="display:none">
<h4 id="month-title"></h4>
<input type="button" name="prev-y" value="Prev Year" id="prev-y" ">
<span id="year">2017</span>
<input type="button" name="next-y" value="Next Year" id="next-y" ">
<table id="dt-able" >
<td class="day_val"> </td>
</table>
<input type="button" name="prev" value="Prev Mo" id="prev-month" ">
<input type="button" name="next" value="Next Mo" id="next-month" ">
</div>
</body>
</html>answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
answered Jan 2 at 19:23
stefanowiczpstefanowiczp
338210
338210
1
it works, thanks a lot
– qadenza
Jan 2 at 19:30
add a comment |
1
it works, thanks a lot
– qadenza
Jan 2 at 19:30
1
1
it works, thanks a lot
– qadenza
Jan 2 at 19:30
it works, thanks a lot
– qadenza
Jan 2 at 19:30
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54011994%2fdatepicker-changes-dates-when-december-is-reached%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
