HTML5 Input Type Date — Default Value to Today?

问题:

The new HTML5 input types are great. Opera\'s new built-in date picker is a breeze, and Chrome has at least supported the new input type with a spin-wheel implementation.

But is there any way to set the default value of the date field to today\'s date? With Opera, I can choose \'Today\' from the date picker, and as soon as I click on either of the step buttons in Chrome, it increments/decrements from today\'s date.

I\'m not shy to code a solution to this minor problem, but it seems silly to me that both of the browsers are fully aware of the current date but won\'t automatically just pop it in (at least as a placeholder).

回答1:

Like any HTML input field, the browser will leave it empty unless a default value is specified with the value attribute.

Unfortunately HTML5 doesn\'t provide a way of specifying \'today\' in the value attribute (that I can see), only a RFC3339 valid date like 2011-09-29. Sorry, that doesn\'t help much!

回答2:

The JavaScript Date object provides enough built-in support for the required format to avoid doing it manually:

Add this for correct timezone support:

Date.prototype.toDateInputValue = (function() {
    var local = new Date(this);
    local.setMinutes(this.getMinutes() - this.getTimezoneOffset());
    return local.toJSON().slice(0,10);
});

jQuery:

$(document).ready( function() {
    $(\'#datePicker\').val(new Date().toDateInputValue());
});​

Pure JS:

document.getElementById(\'datePicker\').value = new Date().toDateInputValue();

回答3:

this works for me:

document.getElementById(\'datePicker\').valueAsDate = new Date();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

回答4:

The following code works well:

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

Note that this relies on PHP.

回答5:

You could fill the default value through javascript as seen here: http://jsfiddle.net/7LXPq/

$(document).ready( function() {
    var now = new Date();
    var month = (now.getMonth() + 1);               
    var day = now.getDate();
    if (month < 10) 
        month = \"0\" + month;
    if (day < 10) 
        day = \"0\" + day;
    var today = now.getFullYear() + \'-\' + month + \'-\' + day;
    $(\'#datePicker\').val(today);
});

I would probably put a bit of extra time to see if the month and date are single digits and prefix them with the extra zero...but this should give you an idea.

EDIT: Added check for the extra zero

回答6:

Follow the standard Y-m-d format, if you are using PHP

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

回答7:

HTML

<input type=\"date\" id=\"theDate\">

JS

$(document).ready(function() {
    var date = new Date();

    var day = date.getDate();
    var month = date.getMonth() + 1;
    var year = date.getFullYear();

    if (month < 10) month = \"0\" + month;
    if (day < 10) day = \"0\" + day;

    var today = year + \"-\" + month + \"-\" + day;       
    $(\"#theDate\").attr(\"value\", today);
});

demo

If you don\'t want to use jQuery you can do something like this

HTML

<input type=\"date\" id=\"theDate\">

JS

var date = new Date();

var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();

if (month < 10) month = \"0\" + month;
if (day < 10) day = \"0\" + day;

var today = year + \"-\" + month + \"-\" + day;       
document.getElementById(\"theDate\").value = today;

demo

回答8:

In HTML5 as such, there is no way to set the default value of the date field to today’s date? As shown in other answers, the value can be set using JavaScript, and this is usually the best approach if you wish to set the default according to what is current date to the user when the page is loaded.

HTML5 defines the valueAsDate property for input type=date elements, and using it, you could set the initial value directly from an object created e.g. by new Date(). However, e.g. IE 10 does not know that property. (It also lacks genuine support to input type=date, but that’s a different issue.)

So in practice you need to set the value property, and it must be in ISO 8601 conformant notation. Nowadays this can be done rather easily, since we can expect currenty used browsers to support the toISOString method:

<input type=date id=e>
<script>
document.getElementById(\'e\').value = new Date().toISOString().substring(0, 10);
</script>

回答9:

If you\'re doing anything related to date and time in the brower, you want to use Moment.js:

moment().format(\'YYYY-MM-DD\');

moment() returns an object representing the current date and time. You then call its .format() method to get a string representation according to the specified format. In this case, YYYY-MM-DD.

Full example:

<input id=\"today\" type=\"date\">
<script>
document.getElementById(\'today\').value = moment().format(\'YYYY-MM-DD\');
</script>

回答10:

Very Simple, Just use server side languages like PHP,ASP,JAVA or even you can use javascript.

Here is the solution

<?php
  $timezone = \"Asia/Colombo\";
  date_default_timezone_set($timezone);
  $today = date(\"Y-m-d\");
?>
<html>
  <body>
    <input type=\"date\" value=\"<?php echo $today; ?>\">
  </body>
</html>

回答11:

use moment.js to solve this issue in 2 lines, html5 date input type only accept \"YYYY-MM-DD\" this format. I solve my problem this way.

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

this is simplest way to solve this issue.

回答12:

if you need to fill input datetime you can use this:

<input type=\"datetime-local\" name=\"datetime\" 
       value=\"<?php echo date(\'Y-m-d\').\'T\'.date(\'H:i\'); ?>\" />

回答13:

This is what I did in my code, I have just tested and it worked fine, input type=\"date\" does not support to set curdate automatically, so the way I used to overcome this limitation was using PHP code a simple code like this.

<html>
<head></head>
    <body>
        <form ...>
            <?php
                echo \"<label for=\'submission_date\'>Data de submissão</label>\";
                echo \"<input type=\'date\' name=\'submission_date\' min=\'2012-01-01\' value=\'\" . date(\'Y-m-d\') . \"\' required/>\";
            ?>
        </form>
    </body>
</html>

Hope it helps!

回答14:

by Javascript:

var today = new Date();

document.getElementById(\"theDate\").value = today.getFullYear() + \'-\' + (\'0\' + (today.getMonth() + 1)).slice(-2) + \'-\' + (\'0\' + today.getDate()).slice(-2);

回答15:

new Date().getFullYear()+\"-\"+ ((parseInt(new Date().getMonth())+1+100)+\"\").substring(1)

回答16:

For NodeJS (Express with SWIG templates):

<input type=\"date\" id=\"aDate\" name=\"aDate\" class=\"form-control\" value=\"{{ Date.now() | date(\"Y-m-d\") }}\" />

回答17:

<input id=\"datePicker\" type=\"date\" />

$(document).ready( function() {
    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);
});

<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script>
<input id=\"datePicker\" type=\"date\" />

回答18:

Since there\'s no default method of setting the value to today\'s date, I would say this should be dependent upon it\'s application. If you\'re looking to maximize your audience\'s exposure to the date picker, then use a server-side script (PHP, ASP, etc.) to set the default value.

However, if it\'s for the administration console of the CMS, and you know that the user will always have JS on or your site trusted, then you can safely use JS to fill the default value, as per jlbruno.

回答19:

I had the same problem and I fixed it with simple JS. The input:

<input type=\"date\" name=\"dateOrder\" id=\"dateOrder\"  required=\"required\">

the JS

<script language=\"javascript\">
document.getElementById(\'dateOrder\').value = \"<?php echo date(\"Y-m-d\"); ?>\";
</script>

Important: the JS script should be in the last code line, or after to input, because if you put this code before, the script won\'t find your input.

回答20:

There is no default method within HTML itself to insert todays date into the input field. However, like any other input field it will accept a value.

You can use PHP to fetch todays date and input it into the value field of the form element.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = \"$year-$month-$day\";

    // Send to the browser the input field with the value set with the date string
    echo \"<input type=\'date\' value=\'$date_string\' />\";
?>

The value field accepts the format YYYY-MM-DD as an input so simply by creating a variable $date_string in the same format that the input value accepts and fill it with the year, month and day fetched from todays date and voilá! You have yourself a preselected date!

Hope this helps :)

Edit:

If you would like to have the input field nested within HTML rather than PHP you could do the following.

<?php
    // Fetch the year, month and day
    $year = date(Y);
    $month = date(m);
    $day = date(d);

    // Merge them into a string accepted by the input field
    $date_string = \"$year-$month-$day\";
?>
<html>
    <head>...</head>
    <body>
        <form>
            <input type=\"date\" value=\"<?php print($date_string); ?>\" />
        </form>
    </body>
</html>

I realise this question was asked a while back (2 years ago) but it still took me a while to find a definite answer out on the internet, so this goes to serve anyone who is looking for the answer whenever it may be and hope it helps everyone greatly :)

Another Edit:

Almost forgot, something thats been a royal pain for me in the past is always forgetting to set the default timezone whenever making a script in PHP that makes use of the date() function.

The syntax is date_default_timezone_set(...);. Documentation can be found here at PHP.net and the list of supported timezones to insert into the function can be found here. This was always annoying since I am in Australia, everything is always pushed back 10 hours if I didn\'t set this properly as it defaults to UTC+0000 where I need UTC+1000 so just be cautious :)

回答21:

Thanks peter, now i change my code.

<input type=\'date\' id=\'d1\' name=\'d1\'>

<script type=\"text/javascript\">
var d1 = new Date();
var y1= d1.getFullYear();
var m1 = d1.getMonth()+1;
if(m1<10)
    m1=\"0\"+m1;
var dt1 = d1.getDate();
if(dt1<10)
dt1 = \"0\"+dt1;
var d2 = y1+\"-\"+m1+\"-\"+dt1;
document.getElementById(\'d1\').value=d2;
</script>

回答22:

And for those using ASP VBScript

<%
\'Generates date in yyyy-mm-dd format
Function GetFormattedDate(setDate)
strDate = CDate(setDate)
strDay = DatePart(\"d\", strDate)
strMonth = DatePart(\"m\", strDate)
strYear = DatePart(\"yyyy\", strDate)
If strDay < 10 Then
  strDay = \"0\" & strDay
End If
If strMonth < 10 Then
  strMonth = \"0\" & strMonth
End If
GetFormattedDate = strYear & \"-\" & strMonth & \"-\" & strDay
End Function
%>

And then in the body, your element should look something like this

<input name=\"today\" type=\"date\" value=\"<%= GetFormattedDate(now) %>\" />

Cheers!

回答23:

Here is an easy way to do this with javascript.

    var date = new Date();
    var datestring = (\'0000\' + date.getFullYear()).slice(-4) + \'-\' + (\'00\' + (date.getMonth() + 1)).slice(-2) + \'-\' + (\'00\' + date.getDate()).slice(-2) + \'T\'+  (\'00\' +  date.getHours()).slice(-2) + \':\'+ (\'00\' + date.getMinutes()).slice(-2) +\'Z\';
    document.getElementById(\'MyDateTimeInputElement\').value = datestring;

回答24:

If you are using ruby you can use this to set the default value to today\'s date and time:

<input type=\"datetime-local\" name=\"time\" value=\"<%= Time.now.strftime(\'%Y-%m-%dT%H:%M\') %>\" />

回答25:

A simple solution !!

<input class=\"set-today\" type=\"date\">
<script type=\"text/javascript\">
window.onload= function(){
document.querySelector(\'.set-today\').value=(new Date()).toISOString().substr(0,10));
}
</script>