Set date in input type date

Question

I will set today's date in the datepicker input type date in Chrome.

$(document).ready(function() {
    let now = new Date();
    let today = now.getDate()  + '/' + (now.getMonth() + 1) + '/' + now.getFullYear();
    console.log(today);
    $('#datePicker').val(today);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="datePicker" type="date">

However, it is not working.

Please try the code snippet in Chrome.

If you pick a date on your fiddle and inspect the result frame, doing a `$('#datePicker').val();` gives `"2012-09-10"` and that's not the format you use for setting the date — , Sep 10 '12 at 06:33
It working in chrome on my end.. What do you exactly mean by `its not working`? — AdityaParab, Sep 10 '12 at 06:34
try : `{ currentText: "Now" }`, see [manual](http://jqueryui.com/demos/datepicker/#option-currentText) — xkeshav, Sep 10 '12 at 06:35
@RC, i will try `2012-09-10` this format but still not work. — Sender, Sep 10 '12 at 06:37
@JigarPandya fr_FR (@user108, see also http://stackoverflow.com/a/3496622/180100) — , Sep 10 '12 at 06:39
Please let me know the plugin you have used for the date picker. Probably trick can be done in the plugin... thanks — Dhanasekar Murugesan, Sep 10 '12 at 07:12
This [link](http://updates.html5rocks.com/2012/08/Quick-FAQs-on-input-type-date-in-Google-Chrome) states that chrome has changes policy after version 20; so if you are using newer version the above would fail perhaps. In that case you need to alter the logic in javascript to match your exact needs base on version of chrome. you can detect version using http://stackoverflow.com/questions/5916900/detect-version-of-browser — Jigar Pandya, Sep 10 '12 at 06:46
It works but your date has to be in this format `YYYY-MM-DD` — Dominic, Mar 05 '14 at 14:50
you can use below date function var today = new Date().toISOString().split('T')[0]; $("#datePicker").val(today); — Gourav Makhija, Oct 14 '18 at 12:16

score 220 · Accepted Answer · edited Jan 24 '14 at 21:00

220

Fiddle link : http://jsfiddle.net/7LXPq/93/

Two problems in this:

Date control in HTML 5 accepts in the format of Year - month - day as we use in SQL
If the month is 9, it needs to be set as 09 not 9 simply. So it applies for day field also.

Please follow the fiddle link for demo:

var now = new Date();

var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);

var today = now.getFullYear()+"-"+(month)+"-"+(day) ;

$('#datePicker').val(today);

edited Jan 24 '14 at 21:00

Groot

13,943
6
61
72

answered Sep 10 '12 at 07:28

Dhanasekar Murugesan

3,141
1
18
21

4

Post-2012 answer: check my answer for a supported solution in one line of code. – Oli Beatson Nov 29 '17 at 22:34
@OlivUtilo—sure, but your answer will deliver incorrect results some of the time. – RobG Feb 02 '19 at 04:29

score 176 · Answer 2 · edited Aug 19 '21 at 14:03

176

document.getElementById("datePicker").valueAsDate = new Date()

should work.

edited Aug 19 '21 at 14:03

undefined

1,019
12
24

answered Nov 10 '12 at 14:30

int32_t

5,774
1
22
20

1

I've found that this doesn't work in Safari for some reason :( – James Alvarez Oct 11 '17 at 17:43
Tested in Chrome and Edge & found working fine. As @Skipjack said, is awesome Answer ! – Arun Feb 20 '20 at 05:08
Looks like the correct solution, however in Safari (13.1.2) the call gets you an Invalid State Exception. Not sure why...? – fbitterlich Aug 11 '20 at 12:29
2

https://caniuse.com/mdn-api_htmlinputelement_valueasdate – xd1936 Jul 31 '21 at 15:10
Thanks, date inputs are a huge pain and this is (now) the correct answer since Safari works as well. – podperson Apr 09 '23 at 08:05

score 36 · Answer 3 · answered Oct 14 '18 at 12:17

36

var today = new Date().toISOString().split('T')[0];
$("#datePicker").val(today);

Above code will work.

answered Oct 14 '18 at 12:17

Gourav Makhija

710
7
16

1

be warned the val() part of the input is local time while toISOString() outputs UCT-Time. Can result to the wrong date in or at least if using an input of type Date + Time will set the wrong hour. – René W. Sep 23 '22 at 21:02

Oli Beatson · Answer 4 · 2017-01-25T23:46:26.147

28

Update: I'm doing this with date.toISOString().substr(0, 10). Gives the same result as the accepted answer and has good support.

edited Jan 25 '17 at 23:46

answered Jul 18 '16 at 12:56

Oli Beatson

811
10
22

2

Works in safari – James Alvarez Oct 11 '17 at 17:47
11

**Note:** this gives a date in the UTC time zone. In contrast the top answer uses local time. – Qwertie Aug 11 '18 at 02:49
2

@OlivUtilo—No, they do not for the period of the timezone offset for the host. – RobG Feb 02 '19 at 04:28
1

As Qwertie says, this potentially gives the wrong answer if you are using a date without a time. eg Sat Sep 01 2018 00:00:00 GMT+0100 gets converted to "2018-08-31" – havlock Aug 29 '19 at 17:51
[deleted previous comment for inaccuracy] so I'm thinking, time zone needs to be set on `date` then in this case (or forced to utc 0 before `toISOString`?) – Oli Beatson Oct 13 '20 at 12:45
https://stackoverflow.com/a/6777470/1140630 may be a good way to Date instance now in UTC – Oli Beatson Oct 13 '20 at 12:48
1

The UTC format of this answer is a huge problem and makes this one line answer... well not one-line anymore. You have to add or subtract hours depending on the GMT and light saving before converting toISOString – Radim Nyč May 28 '21 at 23:26

score 19 · Answer 5 · answered Jun 11 '15 at 18:27

19

to me the shortest way to solve this problem is to use moment.js and solve this problem in just 2 lines.

var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);

answered Jun 11 '15 at 18:27

Umair Khalid

2,259
1
21
28

1

yeah just like $('#datePicker').val(moment().format('YYYY-MM-DD')); – Umair Khalid Feb 06 '17 at 11:33
2

For people unfamiliar with Moment, if you want to format an arbitrary Javascript Date object with moment(): `var yourFormattedDate= moment(yourDate).format('YYYY-MM-DD');` `$('#datePicker').val(yourFormattedDate);` – veuncent Jan 11 '18 at 12:54
1

I would recommend against this. Downloading a library to do something relatively easy. But as of 2021 moment.js is a legacy project anyway – Radim Nyč May 28 '21 at 23:29

score 7 · Answer 6 · answered Mar 05 '14 at 14:52

7

Your code would have worked if it had been in this format: YYYY-MM-DD, this is the computer standard for date formats http://en.wikipedia.org/wiki/ISO_8601

answered Mar 05 '14 at 14:52

Dominic

62,658
20
139
163

score 5 · Answer 7 · answered Mar 14 '17 at 20:03

I usually create these two helper functions when using date inputs:

// date is expected to be a date object (e.g., new Date())
const dateToInput = date =>
  `${date.getFullYear()
  }-${('0' + (date.getMonth() + 1)).slice(-2)
  }-${('0' + date.getDate()).slice(-2)
  }`;

// str is expected in yyyy-mm-dd format (e.g., "2017-03-14")
const inputToDate = str => new Date(str.split('-'));

You can then set the date input value as:

$('#datePicker').val(dateToInput(new Date()));

And retrieve the selected value like so

const dateVal = inputToDate($('#datePicker').val())

Really nice when I have multiple dates to adjust, and don't have moment.js on hand — Mr Moose, Feb 03 '21 at 05:02

score 5 · Answer 8 · edited Aug 22 '20 at 23:42

5

You can only use date in input type="date" as in format YYYY-MM-DD

I have implemented helper as formatDate in NODE.js express-handlebars, don't need to be worry ... just use format as described in first line.

e.g:

< input type="date" id="date" name="date" class="form-control" value="{{formatDate invoice.date 'YYYY-MM-DD'}}" />

edited Aug 22 '20 at 23:42

Ron

5,900
2
20
30

answered Aug 22 '20 at 22:58

Muhammad Shahzad

113
2
5

score 4 · Answer 9 · answered Oct 15 '21 at 16:48

2021

A great way I found to do this is using locale for the formatting. You can use it in many different ways. This works for when you aren't using the jquery datepicker, but the html datepicker.

  $("#datepickerEnd").val(new Date().toLocaleDateString('en-CA'));//YYYY-MM-dd

Or split up for manipulation or adjustments or other uses.

let theDate = new Date();
  $("#datepickerEnd").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

Manipulation example.

  theDate.setDate(theDate.getDate()-7);
  $("#datepickerStart").val(theDate.toLocaleDateString('en-CA'));//YYYY-MM-dd

The 'en-ca' is the needed format for my datepicker. If yours is different you can look for a string format that matches. Since it turns it to a string it does not contain extra information for messing up per region. So, in this way you can use it for purely formatting.

For more information

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

score 2 · Answer 10 · edited Jan 27 '18 at 13:25

2

Datetimepicker always needs input format YYYY-MM-DD, it doesn't care about display format of your model, or about you local system datetime. But the output format of datetime picker is the your wanted (your local system). There is simple example in my post.

edited Jan 27 '18 at 13:25

Stephen Rauch

47,830
31
106
135

answered Jan 27 '18 at 12:31

Eda Jede

81
6

score 2 · Answer 11 · answered Aug 30 '20 at 23:33

For me the shortest way to get locale date and in correct format for input type="date" is this :

var d = new Date(); 
var today = d.getFullYear()+"-"+("0"+(d.getMonth()+1)).slice(-2)+"-"+("0"+d.getDate()).slice(-2);

Or this :

var d = new Date().toLocaleDateString().split('/');
var today = d[2]+"-"+("0"+d[0]).slice(-2)+"-"+("0"+d[1]).slice(-2);

Then just set the date input value :

$('#datePicker').val(today);

score 1 · Answer 12 · edited Aug 19 '21 at 14:28

1

Try This,

$('#datePicker').val(moment().format('YYYY-MM-DD'));

Note : You need to add Moment.js as a dependency

edited Aug 19 '21 at 14:28

abhi

3,110
1
15
17

answered Aug 19 '21 at 10:24

Merrin K

1,602
1
16
27

webstermath · Answer 13 · 2023-03-06T21:17:27.053

0

A solution in one expression:

$('#datePicker').val(
    new Date()
    .toLocaleDateString("en-US", 
    {year:"numeric",month:"2-digit",day:"2-digit"})
   .replace(/(\d+).(\d+).(\d+)/,"$3-$2-$1")
)

edited Mar 06 '23 at 21:17

answered Mar 06 '23 at 20:08

webstermath

555
1
5
14

score -6 · Answer 14 · edited Dec 09 '16 at 11:15

-6

Jquery version

var currentdate = new Date();

$('#DatePickerInputID').val($.datepicker.formatDate('dd-M-y', currentdate));

edited Dec 09 '16 at 11:15

Seb33300

7,464
2
40
57

answered Dec 09 '16 at 10:53

Krutarth Vora

9
1

6

`$.datepicker` is not default jQuery. You're using a plugin and without saying which one, this answer is useless. – Emile Bergeron May 09 '17 at 20:25

Set date in input type date

14 Answers14

Linked

Related