How to set default value to the input[type="date"]

Question

I have tried (JSFiddle):

<input type="date" value="2012-3-23">

but it doesn't work, how can I set the default value?

[Here are some examples of how you could able to add default date or customize date using jquery and javascript.](https://stackoverflow.com/a/55511212/5695622) — MD Iyasin Arafat, Apr 04 '19 at 08:53
This question should not be marked as duplicate. There is a difference wether you get a default value from the server or just want the today value. This is true especially for localized formats, see https://stackoverflow.com/a/57165475/475997 — Frank Hintsch, Jul 23 '19 at 13:44

score 440 · Accepted Answer · edited Oct 07 '21 at 05:46

440

The date should take the format YYYY-MM-DD. Single digit days and months should be padded with a 0. January is 01.

From the documentation:

A string representing a date.

Value: A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.

Your code should be altered to:

<input type="date" value="2013-01-08">

Example jsfiddle

edited Oct 07 '21 at 05:46

Community

1
1

answered Jan 08 '13 at 10:17

Lewis Norton

6,911
1
19
29

6

Ah thanks for this! I am defaulting to today's date with php, and I didn't realize that my problem was just the formatting of the date. I was doing And a variety of other ways, but what works was your suggestion of value="" Brilliant, thank you! – Mike Varosky Feb 25 '14 at 21:01
8

I had to use 'yyyy-MM-dd' for more info: http://msdn.microsoft.com/en-us/library/8kb3ddd4(v=vs.110).aspx – Jimmy Jul 08 '14 at 14:58
This isn't working on mobile-safari. – sheriffderek Oct 20 '16 at 17:06
It is not working on my Ionic APp – Anuj Nov 26 '16 at 17:18
@sheriffderek . This is not supported in all browsers, you need a jquery or similar fallback solution – jonah May 03 '17 at 02:49

score 50 · Answer 2 · answered Sep 10 '16 at 19:11

50

<input type="date" id="myDate" />

Then in js :

_today: function () {
  var myDate = document.querySelector(myDate);
  var today = new Date();
  myDate.value = today.toISOString().substr(0, 10);
},

answered Sep 10 '16 at 19:11

Taufiq Ahmed

700
5
8

3

Thanks! The most simple solution. So weird that it's not popular. Are there any pitfalls with it? – Anton Sutarmin May 09 '17 at 21:01
1

@AntonSutarmin `toISOString()` returns the date in UTC, not the browser's local time. That may or may not be a pitfall. – Austin Riba Aug 06 '19 at 15:31
4

Seems substr is [Deprecated](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/substr), but `today.toISOString().substring(0, 10)` works just as well. – cdehaan May 19 '22 at 11:11

score 35 · Answer 3 · edited Jul 05 '18 at 14:49

35

A possible solution:

document.getElementById("yourDatePicker").valueAsDate = new Date();

Using Moment.js:

var today = moment().format('YYYY-MM-DD');
document.getElementById("datePicker").value = today;

edited Jul 05 '18 at 14:49

Ry-

218,210
55
464
476

answered Aug 06 '16 at 07:54

Umair Khalid

2,259
1
21
28

1

Assigning valueAsDate to new Date() assumes that you want the UTC time. If you are in any other time zone other than UTC (0), the date will be incorrect for part of the day. – ADJenks Jan 24 '19 at 05:14
1

See https://austinfrance.wordpress.com/2012/07/09/html5-date-input-field-and-valueasdate-timezone-gotcha-3/ – ADJenks Jan 24 '19 at 17:51
To tackle ADJenks' case, you can use `(new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'America/New_York'})).formatToParts(date)`. This result you can then map to a `Map` instance, filter out the applicable parts and join with a dash ('-'). – smhg Nov 09 '22 at 22:16

Toni Tegar Sahidi · Answer 4 · 2020-10-30T00:27:08.570

28

if you are using PHP, you can set the value like this

<input type="date" value="<?php echo date("Y-m-d");?>">

but remember that it would return the date of the server. e.g. if your server in USA and your client in Indonesia, it may differ 1 day.

But if you want to use from the client, use javascript solution instead. hope it helps.

edited Oct 30 '20 at 00:27

answered Sep 09 '14 at 01:06

Toni Tegar Sahidi

873
8
14

1

you can also short it a bit =date("Y-m-d")?> – bertasoft Mar 30 '23 at 14:01

Corioquix · Answer 5 · 2015-05-20T23:38:53.410

You can use this js code:

<input type="date" id="dateDefault" />

JS

function setInputDate(_id){
    var _dat = document.querySelector(_id);
    var hoy = new Date(),
        d = hoy.getDate(),
        m = hoy.getMonth()+1, 
        y = hoy.getFullYear(),
        data;

    if(d < 10){
        d = "0"+d;
    };
    if(m < 10){
        m = "0"+m;
    };

    data = y+"-"+m+"-"+d;
    console.log(data);
    _dat.value = data;
};

setInputDate("#dateDefault");

score 4 · Answer 6 · answered Feb 24 '15 at 23:51

4

You can do something like this:

<input type="date" value="<?php echo date("Y-m-d");?>" name="inicio">

answered Feb 24 '15 at 23:51

daronwolff

1,994
21
18

This one worked in my case, `` in Django. – hygull Nov 10 '19 at 05:54

score 2 · Answer 7 · answered Aug 15 '17 at 12:57

2

The easiest way for setting the current date is.

<input name="date" type="date" value="<?php echo date('Y-m-j'); ?>" required>

answered Aug 15 '17 at 12:57

Awais Jameel

1,838
19
14

score 1 · Answer 8 · answered Apr 27 '15 at 06:48

1

you can show date by simply following correct format

<input type="date" value="2014-12-29">

answered Apr 27 '15 at 06:48

Kashif Latif

47
1
11

score 1 · Answer 9 · answered May 25 '16 at 13:08

1 - @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
    <input type="date" "myDate">
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

    var today = new Date();
    $('#myDate').val(today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2));

2 - @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
   <input type="datatime-local" id="myLocalDataTime" step="1">
    @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

var today = new Date();
$('#myLocalDataTime').val(today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2) + '-' + ('0' + today.getDate()).slice(-2)+'T'+today.getHours()+':'+today.getMinutes());

score 1 · Answer 10 · answered Sep 23 '17 at 10:29

1

$date=date("Y-m-d");
echo"$date";
echo"<br>SELECT DATE: <input type='date'  name='date'  id='datepicker' 
value='$date' required >";

answered Sep 23 '17 at 10:29

AAYUSH SAINI

29
3

score 1 · Answer 11 · edited Nov 01 '18 at 07:32

// html code

<input id="idFdate" type="date" />

// javascript code on main load function

function loadFunction() {
    // body...
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();

    if(dd<10){
        dd='0'+dd;
    } 
    if(mm<10){
        mm='0'+mm;
    } 

    today = yyyy+'-'+mm+'-'+dd;                
    document.getElementById("idFdate").defaultValue =today+"";
}

score 1 · Answer 12 · answered Nov 18 '18 at 11:00

JS Code:

function TodayDate(){
        let data= new Date();
        return data.getFullYear().toString()+'-' + (data.getMonth()+1).toString()+'-' + data.getDate().toString()
    }
    document.getElementById('today').innerHTML = '<input type="date" name="Data" value="'+TodayDate()+'" ><br>';

Html Code:

<div id="today" > </div>

A little bit rough but it works!

score 0 · Answer 13 · answered Nov 02 '17 at 23:08

0

Use Microsoft Visual Studio

Date separator '-'

@{string dateValue = request.Date.ToString("yyyy'-'MM'-'ddTHH:mm:ss");}

< input type="datetime-local" class="form-control" name="date1" value="@dateValue" >

answered Nov 02 '17 at 23:08

Sergey Matsko

9
1

score 0 · Answer 14 · edited Nov 01 '18 at 07:24

0

Here are three statements for three different dates in the form with three type=date fields.

$inv_date is the current date:

$inv_date = date("Y-m-d");

$inv_date_from is the first day of the current month:

$inv_date_from = date("Y") . "-" . date("m") . "-" . "01";

$inv_date_to is the last day of the month:

$inv_date_to = date("Y-m-t", strtotime(date("Y-m-t")));

I hope this helps :)

edited Nov 01 '18 at 07:24

Paul Chu

1,249
3
19
27

answered Jun 11 '18 at 05:38

user9923405

1

How to set default value to the input[type="date"]

14 Answers14

Linked

Related