JQuery UI Datepicker set showing month
I need to set the display month on a datepicker in the click event of another control. Is it possible? I cannot use the setDate method as this will set a specific date whereas I am trying to simulate the prev / next month buttons on the datepicker.
EDIT: I am using inline datepicker https://jqueryui.com/datepicker/#inline
HTML:
<input type="button" onclick="ChangeMonth(1);" />
JavaScript:
function ChangeMonth(month)
{
//set month on datepicker
$("#DatePicker").???
}
source to share
Assuming you have mm / dd / yyyy mask like in the demo , you can do the following:
UPD2. Using the Datepicker API
function ChangeMonth(month)
{
var initialVal = $('#datepicker').datepicker('getDate')
curMonth = date.getMonth(),
if(month > 0 && curMonth < 12){
initialVal.setMonth(curMonth + 1)
}
if(month < 0 && curMonth > 1) {
initialVal.setMonth(curMonth - 1)
}
$('#datepicker').datepicker('setDate', initialVal);
}
The caller ChangeMonth(1)
or ChangeMonth(-1)
should change the date in your datapicker field.
UPD1. If you are using inline version
You can simply "click" with the jQuery click event:
$('#datepicker .ui-datepicker-prev').click() // month back
$('#datepicker .ui-datepicker-next').click() //month forward
source to share
To set the month of the date picker use the following code:
var date = $("#datepicker").datepicker( 'getDate' );
date.setMonth(month);
$("#datepicker").datepicker("setDate", date);
JSFIDDLE https://jsfiddle.net/seadonk/uh9g9sn4/
This is an example of how to set the month, decrease the month, or increase the month of the date picker.
JQUERY
$().ready(function(){
$("#SetMonth").click(function(){SetMonth(parseInt($('#month').val())-1);});
$("#NextMonth").click(function(){NextMonth();});
$("#PrevMonth").click(function(){PrevMonth();});
$("#datepicker").datepicker();
$("#datepicker").datepicker("setDate",new Date());
});
function SetMonth(month)
{
var date = $("#datepicker").datepicker( 'getDate' );
date.setMonth(month);
$("#datepicker").datepicker("setDate", date);
}
function NextMonth()
{
var date = $("#datepicker").datepicker( 'getDate' );
date.setMonth(date.getMonth() + 1);
$("#datepicker").datepicker("setDate", date);
}
function PrevMonth(month)
{
var date = $("#datepicker").datepicker( 'getDate' );
date.setMonth(date.getMonth() - 1);
$("#datepicker").datepicker("setDate", date);
}
Html
<input type="button" id="SetMonth" value="Set Month" />
<input type="text" id="month" value = "1"/><br /><br />
<input type="button" id="PrevMonth" value="Prev Month" />
<div id="datepicker"></div>
<input type="button" id="NextMonth" value="Next Month" />
source to share
Facts:
-
$("#datepicker").datepicker("setDate", date)
should be used for "selected date" set. As a side effect, it will also change the display month ", but using it only to set the" display month "is not good practice. -
$('#datepicker .ui-datepicker-prev').click()
and$('#datepicker .ui-datepicker-next').click()
should be used to set the "show month" and it has no side effects. But keep in mind that this is slow if you set the "show months" to a few years. - Unable to get the current "displayed month".
Based on the facts, here is the solution:
var currentDate = new Date ();
var currentMonth = new Date (currentDate.getFullYear(), currentDate.getMonth(), 1);
//Keep currentMonth sync with "display month"
$("#datepicker").datepicker({
onChangeMonthYear: function (year, month, inst) {
currentMonth = new Date(year, month - 1, 1);
//JavaScript used 0...11 for months. Jquery UI used 1...12 for months.
},
});
function ChangeMonth(month)
{
while (currentMonth < month) {
$('#datepicker .ui-datepicker-next').click();
};
while (currentMonth > month) {
$('#datepicker .ui-datepicker-prev').click();
};
};
source to share