使用 Javascript 预填充日期输入字段答案

【问题标题】：pre-populating date input field with Javascript使用 Javascript 预填充日期输入字段
【发布时间】：2012-12-24 02:20:37
【问题描述】：

我正在尝试将日期预填充到 html“日期”输入字段中，但它忽略了我尝试传递的值：

<html>
...
<input id='date' type='date'>
...
</html>

<script>
...
var myDate = new Date();
$("#date").val(myDate);
...

我也尝试过将日期对象作为字符串传递

var myDate = new Date().toDateString();
$("#date").val(myDate);

当我打开表单时，日期字段是空白的。如果我消除 type="date" 标记，则该值显示为字符串，但我无法访问日期选择器。如何预填充日期输入并仍然使用日期选择器？我被难住了。

谢谢。

【问题讨论】：

var myDate = new Date(); 不是var myDate = new.Date();。顺便说一句，在updates.html5rocks.com/2012/08/… 上好好阅读这篇文章
这可能与stackoverflow.com/questions/6982692/…重复
该值需要采用yyyy-mm-dd 格式才能正常工作。在从选择器中选择日期后，我通过查看输入字段的值来弄清楚这一点。演示：jsfiddle.net/Ptrgy

标签： javascript html date input

【解决方案1】：

我没有声誉积分来评论另一个答案，所以我只会添加一个新答案。由于我要添加答案，因此我会提供比评论更多的细节。

有一种比每个人都在这里做的杂耍更简单的归零方法。

var date = new Date();

var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day   = ('0' + date.getDate()).slice(-2);
var year  = date.getFullYear();

var htmlDate = year + '-' + month + '-' + day;

console.log("Date: " + htmlDate);

今天的输出是

Date: 2020-01-07

代码通过在前面加上一个带引号的零来构建一个动态字符串，然后使用 slice(-2) 获取最后 2 个字符。这样，如果零变成01，最后两个就是01。如果零变成011，那么最后两个就是11。

至于从零开始的月份，您还可以在添加零之前动态添加 1，一切仍然有效。您只需在将其转换为字符串之前进行数学运算即可。

作为旁注，我注意到当您更新日期字段时，您必须在设置值之前隐藏该字段并在设置后显示它。我这样做的次数不够多，所以每次需要处理时我都必须重新挣扎。希望这将有助于未来的人。

向未来的人挥手

【讨论】：

【解决方案2】：

为什么不使用 toISOString()

<input type='date'> 字段采用 ISO8601 格式 (reference) 的值，但您不应将 Date.prototype.toISOString() 函数用于其值，因为在输出 ISO8601 字符串之前，它会转换 / 表示日期/时间为 UTC 标准时间（阅读：更改时区）（reference）。除非您碰巧使用或想要该时间标准，否则您将引入一个错误，您的日期有时会（但并非总是）发生变化。

从不更改时区的日期对象填充 HTML5 日期输入

获得<input type='date'> 的正确输入值而不弄乱我所见过的时区的唯一可靠方法是手动使用日期组件获取器：

let d = new Date();
let datestring = d.getFullYear().toString() + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');
document.getElementById('date').value = datestring;

/* Or if you want to use jQuery...
$('#date').val(datestring);
*/

&lt;input id='date' type='date'&gt;

从不更改时区的日期对象填充 HTML5 日期和时间字段

这超出了原始问题的范围，但对于任何想要从 Date 对象填充日期和时间 HTML5 输入字段的人来说，这就是我想出的：

// Returns a 2-member array with date & time strings that can be provided to an
// HTML5 input form field of type date & time respectively. Format will be
// ['2020-12-15', '01:27:36'].
function getHTML5DateTimeStringsFromDate(d) {

  // Date string
  let ds = d.getFullYear().toString() + '-' + (d.getMonth()+1).toString().padStart(2, '0') + '-' + d.getDate().toString().padStart(2, '0');

  // Time string
  let ts = d.getHours().toString().padStart(2, '0') + ':' + d.getMinutes().toString().padStart(2, '0') + ':' + d.getSeconds().toString().padStart(2, '0');

  // Return them in array
  return [ds, ts];
}

// Date object
let d = new Date();

// Get HTML5-ready value strings
let dstrings = getHTML5DateTimeStringsFromDate(d);

// Populate date & time field values
document.getElementById('date').value = dstrings[0]
document.getElementById('time').value = dstrings[1]

/* Or if you want to use jQuery...
$('#date').val(dstrings[0]);
$('#time').val(dstrings[1]);
*/

<input type='date' id='date'>
<input type='time' id='time' step="1">

【讨论】：

【解决方案3】：

这是一个基于 Robin Drexlers 的答案，但在当地时间。

//Get the local date in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 10);

//Set the field value
var field = document.querySelector('#date');
field.value = datestr;

如果您要修改的是日期时间字段（而不仅仅是日期），请不要忘记添加时间 T00:00，或将子字符串更改为 16 个字符，例如：

//Get the local date and time in ISO format
var date = new Date();
date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
var datestr = date.toISOString().substring(0, 16);

//Set the field value
var field = document.querySelector('#datetime');
field.value = datestr;

【讨论】：

【解决方案4】：

以下代码填充本地日期。接受的答案填充 UTC 日期。

  var date = new Date();
  field = document.querySelector('#date-id');
  var day = date.getDate();
  if(day<10){ day="0"+day;}

  var month = date.getMonth()+1;
  if(month<10){ month="0"+month;}

  field.value = date.getFullYear()+"-"+month+"-"+day;

【讨论】：

【解决方案5】：

谢谢 j08691。那个链接就是答案。

对于像我一样苦苦挣扎的其他人，当他们说输入是“yyyy-mm-dd”时，就意味着它！

您必须有 4 位数的年份。你必须有一个破折号，没有空格。日期和月份必须有 2 位数字。

在我的示例中，myDate.getMonth 一月只会返回“1”（实际上它返回“0”，因为出于某种原因，javascript 从 0 到 11 计算月份）。为了做到这一点，我必须执行以下操作：

var myDate, day, month, year, date;
myDate = new Date();
day = myDate.getDate();
if (day <10)
  day = "0" + day;
month = myDate.getMonth() + 1;
if (month < 10)
  month = "0" + month;
year = myDate.getYear();
date = year + "-" + month + "-" + day;
$("#date").val(date);

我希望这可以帮助其他人不要像我在 10 月之前或每月 10 日之前所做的测试那样浪费时间！哈哈

【讨论】：

【解决方案6】：

必须以 ISO 格式设置。

(function () {
    var date = new Date().toISOString().substring(0, 10),
        field = document.querySelector('#date');
    field.value = date;
    console.log(field.value);

})()

http://jsfiddle.net/GZ46K/

【讨论】：

除了 toISOString 会给你一个 UTC 日期，这很可能不是你想要的。
这是一个错误的答案，因为它可能会导致非常难以追踪错误 - 因为，正如 terrinecold 所指出的，它会给你一个 UTC 日期。如果您的日期位于不同的时区，则可能会导致与您开始时的日期不同（在您当地的时区）。
@martixy: terrinecold 三年前就已经给出了完全相同的评论，而且没有失礼。
从他的评论中并不能立即看出为什么你可能不想要那个。我不是粗鲁，只是对结果更加明确。真相！= 粗鲁。
正如 terrinecold 提到的，toISOString() 不是您想要的——它很可能会将您输入 Date 对象的日期/时间转换为 UTC/Zulu 时间。