HTML5输入类型日期-默认值到今天?

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.

新的HTML5输入类型很棒。Opera的新内置日期选择器是一种微风，而Chrome至少支持了带有自旋轮实现的新输入类型。

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.

但是是否有办法将日期字段的默认值设置为今天的日期?有了Opera，我可以从日期选择器中选择“今天”，只要我点击Chrome中的任何一个步骤按钮，它就会从今天的日期开始增加/减少。

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

我不介意为这个小问题编写一个解决方案，但我觉得这两个浏览器都完全了解当前日期，但不会自动地将其弹出(至少作为一个占位符)。

24 个解决方案

#1

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

与任何HTML输入字段一样，浏览器将保持它为空，除非使用value属性指定默认值。

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!

不幸的是，HTML5并没有提供一个在value属性中指定“今天”的方法(我可以看到)，只有一个RFC3339有效日期，比如2011-09-29。对不起，那没有用!

#2

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

JavaScript Date对象为所需的格式提供了足够的内置支持，以避免手工操作:

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:

jQuery:

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

Pure JS:

纯粹的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

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.

注意，这依赖于PHP。

#5

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

您可以通过javascript来填充默认值: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

HTML

HTML

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

JS

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

如果你不想使用jQuery，你可以这样做。

HTML

HTML

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

JS

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

#7

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

如果您正在使用PHP，请遵循标准的Y-m-d格式。

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

#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中，没有办法将日期字段的默认值设置为今天的日期?如其他答案所示，可以使用JavaScript来设置值，如果您希望在加载页面时根据当前日期设置默认值，这通常是最好的方法。

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

HTML5为输入类型=date元素定义了valueAsDate属性，并使用它，您可以直接从创建的对象(如新日期())设置初始值。但是，例如，IE 10不知道该属性。(它也缺乏对输入类型=日期的真正支持，但这是另一个问题。)

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:

所以在实践中，你需要设置值属性，它必须在ISO 8601符合性表示法中。现在可以很容易地做到这一点，因为我们可以期望currenty使用浏览器来支持toISOString方法:

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

#9

A possible solution

一种可能的解决方案

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

JSFiddle example

JSFiddle例子

#10

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

如果您在brower中做任何与日期和时间相关的事情，您希望使用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.

moment()返回表示当前日期和时间的对象。然后调用它的.format()方法，以根据指定的格式获取字符串表示。在这种情况下,YYYY-MM-DD。

Full example:

完整的例子:

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

#11

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

非常简单，只需使用PHP、ASP、JAVA或甚至可以使用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>

#12

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.

使用的时刻。js用2行来解决这个问题，html5日期输入类型只接受“YYYY-MM-DD”这个格式。我用这种方法解决我的问题。

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

this is simplest way to solve this issue.

这是解决这个问题最简单的方法。

#13

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'); ?>" />

#14

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.

这是我在我的代码中所做的，我刚刚测试过，它工作得很好，输入类型="date"不支持自动设置curdate，所以我用来克服这个限制的方法是使用PHP代码，像这样的简单代码。

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

希望它可以帮助!

#15

by Javascript:

Javascript:

var today = new Date();

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

#16

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

#17

For NodeJS (Express with SWIG templates):

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

#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.

因为没有默认的方法将值设置为今天的日期，所以我认为这应该依赖于它的应用程序。如果您希望最大化您的受众对日期选择器的暴露，那么使用服务器端脚本(PHP、ASP等)来设置默认值。

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.

但是，如果是CMS的管理控制台，并且您知道用户将始终有JS或您的站点受信任，那么您可以安全地使用JS来填充默认值，就像jlbruno那样。

#19

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

我遇到了同样的问题，我用简单的JS解决了问题。输入:

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

the JS

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.

重要的是:JS脚本应该在最后的代码行中，或者在输入之后，因为如果您之前输入了这个代码，脚本就不会找到您的输入。

#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.

在HTML本身中没有默认的方法将todays date插入到输入字段中。但是，与其他输入字段一样，它将接受一个值。

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

您可以使用PHP获取todays date并将其输入到表单元素的value字段中。

<?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!

value字段接受YYYY-MM-DD作为输入的格式，因此只需创建一个变量$date_string，其格式与输入值接受并填充它的年、月、日的格式相同。你有一个预先选定的日期!

Hope this helps :)

希望这有助于:)

Edit:

编辑:

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

如果您希望在HTML而不是PHP内嵌套输入字段，您可以执行以下操作。

<?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.

几乎忘记了，过去对我来说是一种皇家的痛苦，每当在PHP中使用日期()函数时，总是忘记设置默认时区。

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

语法作用(…);。在PHP.net中可以找到文档，在这里可以找到插入到该函数的支持的时区列表。这总是让人讨厌，因为我在澳大利亚，如果没有正确设置的话，每件事都要推迟10个小时，因为我需要UTC+1000，所以要小心:)

#21

Thanks peter, now i change my code.

谢谢peter，现在我改了代码。

<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

Here is an easy way to do this with javascript.

这里有一个简单的方法来使用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;

#23

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

如果您使用的是ruby，您可以使用它将默认值设置为今天的日期和时间:

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

#24

And for those using ASP VBScript

对于那些使用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!

干杯!