Html 如何将输入类型日期的默认值设置为今天？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6982692/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set input type date's default value to today?
提问by Ian Brown
The 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).
我并不羞于为这个小问题编写解决方案，但对我来说，两个浏览器都完全知道当前日期但不会自动弹出它（至少作为占位符），这似乎很愚蠢。
回答by Tak
Like any HTML input field, the browser will leave it empty unless a default value is specified with the valueattribute.
与任何 HTML 输入字段一样，浏览器会将其留空，除非使用该value属性指定了默认值。
Unfortunately HTML5 doesn't provide a way of specifying 'today' in the valueattribute (that I can see), only a RFC3339valid date like 2011-09-29.
不幸的是，HTML5 没有提供在value属性中指定“今天”的方法（我可以看到），只有一个RFC3339有效日期，如2011-09-29.
TL;DRUse YYYY-MM-DDdate format or it won't display
TL;DR使用YYYY-MM-DD日期格式，否则不显示
回答by brianary
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();
回答by André
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
回答by Isham Mohamed
The following code works well:
以下代码运行良好：
<input type="date" value="<?php echo date('Y-m-d'); ?>" />
Note that this relies on PHP.
请注意，这依赖于 PHP。
回答by Jeff
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
编辑：添加检查额外的零
回答by Shuhad zaman
Follow the standard Y-m-d format, if you are using PHP
如果您使用的是 PHP，请遵循标准的 Ymd 格式
<input type="date" value="<?php echo date("Y-m-d"); ?>">
回答by Shuhad zaman
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
演示
回答by Jukka K. Korpela
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 valueAsDateproperty for input type=dateelements, 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 定义了元素的valueAsDate属性input type=date，使用它，您可以直接从创建的对象设置初始值，例如new Date(). 但是，例如 IE 10 不知道该属性。（它也缺乏对 的真正支持input type=date，但这是一个不同的问题。）
So in practice you need to set the valueproperty, 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 toISOStringmethod:
所以在实践中你需要设置value属性，它必须是符合 ISO 8601 的符号。现在这可以很容易地完成，因为我们可以期望当前使用的浏览器支持该toISOString方法：
<input type=date id=e>
<script>
document.getElementById('e').value = new Date().toISOString().substring(0, 10);
</script>
回答by Gabriel Garcia
If you're doing anything related to date and time in the brower, you want to use Moment.js:
如果你在浏览器中做任何与日期和时间相关的事情，你想使用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>
回答by Umair Khalid
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.
使用moment.js 在2 行中解决这个问题，html5 日期输入类型只接受“YYYY-MM-DD”这种格式。我是这样解决我的问题的。
var today = moment().format('YYYY-MM-DD');
$('#datePicker').val(today);
this is simplest way to solve this issue.
这是解决此问题的最简单方法。
