CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-datepicker
Derek Adair
Derek Adair

Reputation: 21915

.datepicker('setdate') issues, in jQuery

I have a function that executes a query to get some data based on a certain date range which is selected using .datepicker(). I am trying to set the datepicker's that are in the response data back to the date range which was selected before the query was executed.

queryDate = '2009-11-01';
$('#datePicker').datepicker('setDate', queryDate);

has the interesting result of setting the datepicker to today's date! I wouldn't be so confused if it just spit out an error. Why does it set it to today's date?

How can I take the date which is formated like, 'yyyy-mm-dd' and set the datepicker to it?

I am thinking it might be best to just set the text-box which the datepicker is linked to to 'queryDate'.

Upvotes: 36

Views: 158046

Answers (6)

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827208

If you would like to support really old browsers you should parse the date string, since using the ISO8601 date format with the Date constructor is not supported pre IE9:

var queryDate = '2009-11-01',
    dateParts = queryDate.match(/(\d+)/g)
    realDate = new Date(dateParts[0], dateParts[1] - 1, dateParts[2]);  
                                    // months are 0-based!
// For >= IE9
var realDate = new Date('2009-11-01');  

$('#datePicker').datepicker({ dateFormat: 'yy-mm-dd' }); // format to show
$('#datePicker').datepicker('setDate', realDate);

Check the above example here.

Upvotes: 36

jomon
jomon

Reputation: 21

function calenderEdit(dob) {
    var date= $('#'+dob).val();
    $("#dob").datepicker({
        changeMonth: true,
        changeYear: true, yearRange: '1950:+10'
    }).datepicker("setDate", date);
}

Upvotes: 2

jurka
jurka

Reputation: 13173

When you trying to call setDate you must provide valid javascript Date object.

queryDate = '2009-11-01';

var parsedDate = $.datepicker.parseDate('yy-mm-dd', queryDate);

$('#datePicker').datepicker('setDate', parsedDate);

This will allow you to use different formats for query date and string date representation in datepicker. This approach is very helpful when you create multilingual site. Another helpful function is formatDate, which formats javascript date object to string.

$.datepicker.formatDate( format, date, settings );

Upvotes: 75

cfwall
cfwall

Reputation: 431

Check that the date you are trying to set it to lies within the allowed date range if the minDate or maxDate options are set.

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359776

As Scobal's post implies, the datepicker is looking for a Date object - not just a string! So, to modify your example code to do what you want:

var queryDate = new Date('2009/11/01'); // Dashes won't work
$('#datePicker').datepicker('setDate', queryDate);

Upvotes: 11

Mark Pope
Mark Pope

Reputation: 11264

Try changing it to:

queryDate = '2009-11-01';
$('#datePicker').datepicker({defaultDate: new Date (queryDate)});

Upvotes: 7

Related Questions