JQuery UI datepicker: Show calender for a date programmatically.

Question

Is there a way we can show the calender for a particular year and month using datepicker configuration options? The API documentation doesn't list any such functionality. Still is there a way out?

Answer 1

you can call:

var x = $("#datePicker").datepicker();
$.datepicker._adjustDate(x,2,'M'); 

To move up two months. or

var x = $("#datePicker").datepicker();
$.datepicker._adjustDate(x,-1,'Y'); 

to move back a year

var x = $("#datePicker").datepicker();
$.datepicker._adjustDate(x,42,'D'); 

Move ahead 6 weeks.

If you want to jump to a specific month/year you have two options: Either call setDate() directly on the datepicker (which will consequently change the selected day as well) OR you could calculate the date difference between the currently selected date and your target date and then pass X Days to _adjustDate

//get currently selected date (or today if the user hasn't picked any)
var currentdate = ((x.datepicker('getDate') !== null) ? x.datepicker('getDate') : new Date());
//set target date october 21, 2012 (Date() takes month -1)
var targetdate = new Date(2012,9,21);
//calculate the number of days different        
var diff = Math.round((targetdate-currentdate)/(1000*60*60*24),0);
//adjust the datepicker by this number of days      
$.datepicker._adjustDate(x,diff,'D');

The beauty of this is that it won't actually change the selected value of the datepicker. That will only happen if the user actually clicks on a date.