jquery-ui-datepicker

jQuery UI Datepicker

To set current date in control to which jQuery UI datepicker bind, use setDate() method. Pass date object which needs to be set as an argument to setDate() method. If you want to set it to current date then you can pass ‘today’ as argument.

So, jQuery code to set current date may look like something similar,

$(document).ready(function() {
    $('#txtDate').datepicker('setDate', 'today');
});

But Wait!!! Above jQuery code will not work. It will not set the current date. Wondering why?

Well, as I told you that setDate() is a method, not an option. And to call the any object, object must be initialized. And in this case, datepicker is not even initialized. So correct way is,

$(document).ready(function() {
    $('#txtDate').datepicker();
    $('#txtDate').datepicker('setDate', 'today');
}); 

OR

$(document).ready(function() {
    $('#txtDate').datepicker().datepicker('setDate', 'today');
});

See result below

Other method is,

$(document).ready(function() {
    $('#txtDate').datepicker();
    $('#txtDate').datepicker('setDate', new Date());
});

Note: Please set the date format as per your need, otherwise it will use date format of client machine.

$(document).ready(function() {
    $('#txtDate').datepicker({ dateFormat: 'yy/mm/dd' });
    $('#txtDate').datepicker('setDate', new Date());
}); 

As mentioned earlier, the setDate() method takes date object as argument so you can also set any specific date as well. For example, to set 31-Dec-2000 as date

$(document).ready(function() {
    var myDate = new Date(2000,11,31);
    $('#txtDate').datepicker();
    $('#txtDate').datepicker('setDate', myDate);
}); 

You can also pass the date as string.

$(document).ready(function() {
    $('#txtDate').datepicker();
    $('#txtDate').datepicker('setDate', '12/31/2000');
}); 

Few Interesting things with jQuery UI DatePicker setDate()

setDate() method takes ‘date’ as argument but this argument either can be date object or string object.

$('#txtDate').datepicker().datepicker('setDate', new Date());
//OR
$('#txtDate').datepicker().datepicker('setDate', '12/31/2000'); 

But you can also pass number of days from today which you want to set as date. Consider below jQuery code,

$('#txtDate').datepicker().datepicker('setDate', '+7'); 

This code will set the date as “12-Dec-2012”, considering today is “5-Dec-2012”. Interesting?? Wait, there is more. You can also pass this in weeks, month, years or combination of any of these. Default is days.

Use “y” for years, “m” for months, “w” for weeks, “d” for days.

For 1 month from current date,

$('#txtDate').datepicker().datepicker('setDate', '+1m'); 

For 1 year from current date,

$('#txtDate').datepicker().datepicker('setDate', '+1y'); 

For 1 month and 7 days from current date,

$('#txtDate').datepicker().datepicker('setDate', '+1m +7d'); 

So next time, while using setDate() method remember these little but useful things.

Related Posts


One thought on “jQuery UI Datepicker

  1. Guild Hosting

    hello!,I like your writing so so much! share we keep in touch more about your article on AOL? I need a specialist in this space to solve my problem. May be that is you! Having a look ahead to see you.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *


*