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

I have tried (JSFiddle):

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

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

This question is related to html date html-input

The answer is


you can show date by simply following correct format

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

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.


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


The easiest way for setting the current date is.

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


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

You can do something like this:

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

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

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

A possible solution:

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

Using Moment.js:

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

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

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

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


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!


Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to date

How do I format {{$timestamp}} as MM/DD/YYYY in Postman? iOS Swift - Get the Current Local Time and Date Timestamp Typescript Date Type? how to convert current date to YYYY-MM-DD format with angular 2 SQL Server date format yyyymmdd Date to milliseconds and back to date in Swift Check if date is a valid one change the date format in laravel view page Moment js get first and last day of current month How can I convert a date into an integer?

Examples related to html-input

Using Pipes within ngModel on INPUT Elements in Angular HTML 5 input type="number" element for floating point numbers on Chrome Html/PHP - Form - Input as array How to locate and insert a value in a text box (input) using Python Selenium? Drop Down Menu/Text Field in one HTML5 pattern for formatting input box to take date mm/dd/yyyy? How to add button inside input How to handle floats and decimal separators with html5 input type number How to set default value to the input[type="date"] Get data from file input in JQuery