How to Pre-Populate a Jquery Datepicker Textbox with Today's Date

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

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());

Jquery DatePicker Set default date

Today date:

$( ".selector" ).datepicker( "setDate", new Date());
// Or on the init
$( ".selector" ).datepicker({ defaultDate: new Date() });

15 days from today:

$( ".selector" ).datepicker( "setDate", 15);
// Or on the init
$( ".selector" ).datepicker({ defaultDate: 15 });

jQuery ui docs

Why does jQuery Datepicker select today's date when numbers are entered and enter is pressed?

The Enter key will always grab the selected date and output this value to the textbox. This selected date will be the default date when it is opened. You can set the defaultDate when opening the datepicker, but it will either be a valid date or today's date. There is no way currently to open a datepicker with no defaultDate out of the box.

Normally, you can remove the selected date by setting it to null.

$('#mydate').datepicker('setDate', null);

But this won't work when the datepicker is initially opened, since it ALWAYS opens with a default/selected date.

I've come up with a fiddle showing a possible work around.

/***
    Since there is ALWAYS a default date in the datepicker when it's opened,
    then let's try and trigger an event after it has been opened, then set the
    date to null.
***/
$('#textbox').datepicker(
{
    beforeShow: function() 
    {
        $(this).trigger('afterShow');        
    }
})
.bind('afterShow', function()
{
    var $this = $(this);
    setTimeout(function()
    {
      $this.datepicker('setDate', null);  
    }, 100); 
});

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

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());

Can Jquery UI Datepicker Display Date In a Format that is Different from the Format Date Was Originally Saved In?

There is a beforeShow option with Datepicker that I use for the following solution which can be viewed here.

For this, I took the existing value of the input element and convert it to a string that datepicker can interpret, then sets the date:

$(".datepicker").datepicker({
        dateFormat: "dd-M-yy",
        showOn: "button",               
        buttonText: "Calendar",
        beforeShow: function(ele, obj){

            // Current value
            var existing_date = $(ele).val();

            // If it contains a / then it's not formatted right
            if(existing_date.indexOf('/') > -1){

                // Using new Date and Date.parse gives us
                // Mon Apr 13 2020 00:00:00 GMT-0500 (Central Daylight Time)
                var new_date = new Date(Date.parse(existing_date));

                // Set the date
                $(ele).datepicker("setDate", new_date);

            }

        }
});

I'm not sure this is the best way to do it but it's a start. I hope it helps!

Pre populate date into another field on pageload

You can find the answer in a previous stackoverflow question here:

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

Always worth a quick Google search ;)

Making that code specific to your code would be something like:

var today = new Date();
today.setDate(today.getDate()+4);
future =(today.getMonth()+1) + '/' + today.getDate() + '/' + today.getFullYear();

$("#alternate").val(future);

Here's a jsfiddle live version: http://jsfiddle.net/NXFy2/

---

EDIT: You could use the datepicker built in formatting to format a new date actually:

$.datepicker.formatDate('yy-mm-dd', new Date(2007, 1 - 1, 26));

See the examples and docs here: http://docs.jquery.com/UI/Datepicker/formatDate

---

FURTHER EDIT: To use the datepicker formatDate function together with the initial code to get the date today or however many days from today you could do the following:

$( "#calendar" ).datepicker({ minDate: +4, maxDate: "+1M +4D", dayNamesMin: ['Mon', 'Tue',    'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], prevText: '<<', nextText: '>>', changeMonth: false, changeYear: false, altField: "#alternate", altFormat: "DD, d MM, yy", gotoCurrent: false,  defaultDate: '+4'});

var today = new Date();
today.setDate(today.getDate()+4);

$("#alternate").val($.datepicker.formatDate('D, dd M yy', today));

Here is the jsfiddle: http://jsfiddle.net/xX5AM/4/

---

Related Topics