How do I pre-populate a jQuery Datepicker textbox with today's date?

Question

I have a very simple jQuery Datepicker calendar:

$(document).ready(function(){
    $("#date_pretty").datepicker({ 
    });
});

and of course in the HTML...

<input type="text" size="10" value="" id="date_pretty"/>

Today's date is nicely highlighted for the user when they bring up the calendar, but how do I get jQuery to pre-populate the textbox itself with today's date on page load, without the user doing anything? 99% of the time, the today's date default will be what they want.

Solution 1

Update: There are reports this no longer works in Chrome.

This is concise and does the job (obsolete):

$(".date-pick").datepicker('setDate', new Date());

This is less concise, utilizing chaining allows it to work in chrome (2019-06-04):

$(".date-pick").datepicker().datepicker('setDate', new Date());

Solution 2

You must FIRST call datepicker() > then use 'setDate' to get the current date.

$(".date-pick").datepicker();
$(".date-pick").datepicker("setDate", new Date());

OR chain your setDate method call after your datepicker initialization, as noted in a comment on this answer

$('.date-pick').datepicker({ /* optional option parameters... */ })
               .datepicker("setDate", new Date());

It will NOT work with just

$(".date-pick").datepicker("setDate", new Date());

NOTE : Acceptable setDate parameters are described here

Solution 3

var myDate = new Date();
var prettyDate =(myDate.getMonth()+1) + '/' + myDate.getDate() + '/' +
        myDate.getFullYear();
$("#date_pretty").val(prettyDate);

seemed to work, but there might be a better way out there..

Solution 4

The setDate() method sets the date and updates the associated control. Here is how:

$("#datepicker1").datepicker({
    dateFormat: "yy-mm-dd"
}).datepicker("setDate", "0");

Demo

As mentioned in documentation, setDate() happily accepts the JavaScript Date object, number or a string:

The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null to clear the selected date.

In case you are wondering, setting defaultDate property in the constructor does not update the associated control.

Solution 5

Set to today:

$('#date_pretty').datepicker('setDate', '+0');

Set to yesterday:

$('#date_pretty').datepicker('setDate', '-1');

And so on with any number of days before or after today's date.

See jQuery UI › Methods › setDate.

View more solutions

Comments

[ahmadali shafiee]

The most popular answer is better that accepted answer. it's better to change the accepted answer.

[Adrien Be]

my related question stackoverflow.com/questions/25602649/…

[Teepeemm]

@ahmadalishafiee (and everyone else). The currently accepted solution was accepted on 2015-05-07.

[Marcus]

This works pretty well except for two things: 1) I was kind of hoping to use jQuery method to get the current date, but maybe it doesn't matter. 2) this solution produces a value exactly one month previous to today's date!

[lucas]

OH - you're right! check it out - w3schools.com/jsref/jsref_obj_date.asp - month is 0-11 - you'll have to add 1.. curiously, getDate is 1-31, but getMonth is 0-11..

[CiscoIPPhone]

My browser did not recognise the asString() function. I did it like this: $(".date-pick").datepicker('setDate', new Date());

[rg88]

I think asString() should be toString().

[Craig Hooghiem]

Kevin Luck's DatePicker and the Jquery UI DatePicker are two very different datepickers.

[Mathias Bynens]

@gamerzfuse jQuery UI’s datepicker is based on that of Kevin Luck.

[Ravi Ram]

There is an easier way .. see my post below.

[Afshar Mohebi]

This solution let's to show text directly and set date simultaneously while CiscoIPPhone's solution needs another step to show the value without opening the picker.

[mutantacule]

For setDate you can also use the usual relative notation of datepicker, for example to get the following day just type .datepicker('setDate', '+1d').

[chobo2]

Why is it in your demo it works. When I copy this code into my site the dialog keeps popping up when the pg loads.

[brianz]

Using jQueryUI 1.8 I found this solution to be the only (sane) way to accomplish this.

[jwbensley]

Great, as others have mentioned, you must have called datepicker() once already so, $(".date-pick").datepicker("setDate", '+0');

[abc123]

$(".selector").datepicker().datepicker("setDate", new Date()); will work and doesn't make jQuery search the DOM twice.

[Mehdiway]

This is the one that actually worked for me and not the accepted solution. Thank you

[William]

I would like to suggest if the stackoverflow could just put the top voted answer on top, rather than as it's. E.g like what Youtube did is good.

[Adrien Be]

+1, using the Date object is much cleaner & bug-proof. Note that you can use things such as var myDate = new Date(); myDate.setFullYear(1985); myDate.setMonth(0); /* month is zero-based */ myDate.setDate(28); see more developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[jjohn]

This also worked as I wished, since my dateFormat needs to match MySQL's date format (yy-mm-dd). This setDate adds zero padding to the month and day.

[Misha Akopov]

Great, accepted answer says only $(".date-pick").datepicker("setDate", new Date()); and it doesn't work without first call $(".date-pick").datepicker(); your answer is much better

[Misha Akopov]

This will not work, first you should call $(".date-pick").datepicker(); and then $(".date-pick").datepicker('setDate', new Date());

[Max Flex]

Not longer works in Chrome after recent browser update

[CiscoIPPhone]

@QuinnDaley Thanks - I'm adding a warning to my answer.

[lydiat]

This worked for me - the accepted answer and other options above didn't.

[adamj]

This is a much, much better solution than any of the above.

[John81]

Best answer for this question at the present time although I needed the date format to be "mm-dd-yy" to match the date picker.

[seebiscuit]

Works. I'm setting $(".date-pick").datepicker().datepicker('setDate', new Date()); tho

[waxingsatirical]

option A is good because date picker can remain blank until a date is to be selected at which point it defaults to the current date

[Mike Volmar]

this solution worked for me in chrome, others listed here did not