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

HtmlDateHtml Input

Html Problem Overview


I have tried (JSFiddle):

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

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

Html Solutions


Solution 1 - Html

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

Solution 2 - Html

<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);
},

Solution 3 - Html

A possible solution:

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

Using Moment.js:

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

Solution 4 - Html

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.

Solution 5 - Html

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

Solution 6 - Html

You can do something like this:

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

Solution 7 - Html

The easiest way for setting the current date is.

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

Solution 8 - Html

you can show date by simply following correct format

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

Solution 9 - Html

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

Solution 10 - Html

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

Solution 11 - Html

// 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+"";
}

Solution 12 - Html

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!

Solution 13 - Html

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" >>

Solution 14 - Html

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 :)

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionhh54188View Question on Stackoverflow
Solution 1 - HtmlLewis NortonView Answer on Stackoverflow
Solution 2 - HtmlTaufiq AhmedView Answer on Stackoverflow
Solution 3 - HtmlUmair KhalidView Answer on Stackoverflow
Solution 4 - HtmlToni Tegar SahidiView Answer on Stackoverflow
Solution 5 - HtmlCorioquixView Answer on Stackoverflow
Solution 6 - HtmldaronwolffView Answer on Stackoverflow
Solution 7 - HtmlAwais JameelView Answer on Stackoverflow
Solution 8 - HtmlKashif LatifView Answer on Stackoverflow
Solution 9 - HtmlMusaView Answer on Stackoverflow
Solution 10 - HtmlAAYUSH SAINIView Answer on Stackoverflow
Solution 11 - HtmlSagar KholeView Answer on Stackoverflow
Solution 12 - HtmlCharliePrm88View Answer on Stackoverflow
Solution 13 - HtmlSergey MatskoView Answer on Stackoverflow
Solution 14 - Htmluser9923405View Answer on Stackoverflow