Set today's date as default date in jQuery UI datepicker

Question

I just want today's date to be the default value in the input that is using jQuery UI's datepicker:

<input id="mydate" type="text" />

I tried the below code but it didn't work:

var currentDate = new Date();  
$("#mydate").datepicker("setDate",currentDate);

Martin Eden · Answer 1 · 2014-04-24T13:10:34.220

114

You need to make the call to setDate separately from the initialization call. So to create the datepicker and set the date in one go:

$("#mydate").datepicker().datepicker("setDate", new Date());

Why it is like this I do not know. If anyone did, that would be interesting information.

edited Apr 24 '14 at 13:10

answered Jul 05 '13 at 15:35

Martin Eden

5,785
3
26
33

score 89 · Answer 2 · edited Aug 07 '17 at 05:54

89

You have to initialize the datepicker before calling a datepicker method

Here is a

Working JSFiddle.

$("#mydate").datepicker().datepicker("setDate", new Date());
//-initialization--^          ^-- method invokation

<link href="https://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<input type="text" id="mydate" />

_{P.S: This assumes that you have the correct date set in your computer}

edited Aug 07 '17 at 05:54

Hassan Imam

16,414
3
29
41

answered Nov 12 '14 at 19:19

T J

40,740
11
73
131

1

Thanks! you could also add to your example datepicker("selectedDate", new Date()); which is selecting the date only when the OP opens the calendar. – Revious Nov 12 '14 at 21:39
@Revious Actually, I couldn't find any reference to such method... There's also [`defaultDate`](http://api.jqueryui.com/datepicker/#option-defaultDate), but it won't set the date inside the textbox which is being asked in question... – T J Nov 16 '14 at 09:36

score 33 · Answer 3 · edited Dec 03 '18 at 11:46

33

Its very simple you just add this script,

$("#mydate").datepicker({ dateFormat: "yy-mm-dd"}).datepicker("setDate", new Date());

Here, setDate set today date & dateFormat define which format you want set or show.

Hope its simple script work..

edited Dec 03 '18 at 11:46

Mitul shah

3
4

answered Mar 18 '14 at 08:32

rjony

331
3
7

score 7 · Answer 4 · answered Sep 09 '13 at 04:26

7

$("#date").datepicker.regional[""].dateFormat = 'dd/mm/yy';
$("#date").datepicker("setDate", new Date());

Always work for me

answered Sep 09 '13 at 04:26

Ashisha Nautiyal

1,369
2
19
39

score 4 · Answer 5 · edited Sep 09 '13 at 04:14

4

This one work for me , first you bind datepicker to text-box and in next line set (today as default date) the date to it

$("#date").datepicker();

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

edited Sep 09 '13 at 04:14

Chintan Khetiya

15,208
9
41
81

answered Jul 13 '13 at 19:20

Usman Younas

1,203
13
18

score 4 · Answer 6 · answered Apr 23 '14 at 17:52

Note: When you pass setDate, you are calling a method which assumes the datepicker has already been initialized on that object.

$(function() {    
   $('#date').datepicker();
   $('#date').datepicker('setDate', '04/23/2014');
});

Test: http://jsfiddle.net/wimarbueno/hQkec/1/

score 4 · Answer 7 · answered Sep 03 '14 at 16:27

4

Set default date in initialization:

$("#date").datepicker({
    defaultDate: '01/26/2014'
});

answered Sep 03 '14 at 16:27

Morten Holmgaard

6,452
6
55
79

score 2 · Answer 8 · edited Nov 12 '14 at 18:26

2

This worked for me and also localised it:

$.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );
$(function() {
   $( "#txtDespatchDate" ).datepicker( );
   $( "#txtDespatchDate" ).datepicker( "option", "dateFormat", "dd/mm/yy" );
   $('#txtDespatchDate').datepicker('setDate', new Date());
});

edited Nov 12 '14 at 18:26

T J

40,740
11
73
131

answered Jul 31 '14 at 02:28

Jan

41
1

score 1 · Answer 9 · answered Oct 12 '16 at 09:27

1

Just set minDate: 0

Here is my script:

$("#valid_from")
   .datepicker({
     minDate: 0,
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 3
})

answered Oct 12 '16 at 09:27

Mike Nguyen

987
1
10
15

score 1 · Answer 10 · answered Dec 08 '16 at 09:51

I tried many ways and came up with my own solution which works absolutely as required.

"mydate" is the ID of input or datepicker element/control.

        $(document).ready(function () {

        var dateNewFormat, onlyDate, today = new Date();

        dateNewFormat = today.getFullYear() + '-' + (today.getMonth() + 1);

        onlyDate = today.getDate();

        if (onlyDate.toString().length == 2) {
            dateNewFormat += '-' + onlyDate;
        }
        else {
            dateNewFormat += '-0' + onlyDate;
        }
        $('#mydate').val(dateNewFormat);
    });

score 0 · Answer 11 · edited Apr 09 '16 at 07:01

0

You have not defined

$("#mydate").datepicker({});

edited Apr 09 '16 at 07:01

T J

40,740
11
73
131

answered Oct 24 '12 at 13:12

Ashish Mehta

6,443
4
22
48

score 0 · Answer 12 · edited Jun 09 '16 at 18:31

0

Try this:

$('.datepicker').datepicker('update', new Date(year,month,day));

edited Jun 09 '16 at 18:31

Gautam Savaliya

1,209
2
17
28

answered Jun 09 '16 at 16:28

Abdo Bahhous

1

score -1 · Answer 13 · answered Jul 23 '14 at 03:08

-1

try this:

$("#mydate").datepicker("setDate",'1d');

answered Jul 23 '14 at 03:08

Ethan More

11
1

What's `1d` supposed to be? – JW Lim Jul 23 '14 at 03:15
sorry for the late reply, `1d` means `today`. – Ethan More Aug 05 '14 at 04:26

Set today's date as default date in jQuery UI datepicker

13 Answers13

Working JSFiddle.

Linked