25

我正在尝试将日期预填充到 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" 标记，则该值显示为字符串，但我无法访问日期选择器。如何预填充日期输入并仍然使用日期选择器？我难住了。

谢谢。

4

6 回答 6

55

它必须设置为 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/

于 2013-01-09T21:01:52.187 回答
10

为什么不使用 toISOString()

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

从不更改时区的日期对象填充 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);
*/
<input id='date' type='date'>

从不更改时区的日期对象填充 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">

于 2019-11-15T15:56:37.377 回答
7

谢谢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 日之前所做的测试那样浪费时间！哈哈

于 2013-01-09T21:16:20.567 回答
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;
于 2016-07-15T01:05:02.473 回答
2

下面的代码填充本地日期。接受的答案填充 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;
于 2016-02-28T04:52:16.790 回答
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 个字符。这样，如果 0 变成 01，最后 2 就是 01。如果 0 变成 011，那么最后 2 就是 11。

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

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

向未来的人挥手

于 2020-01-07T20:21:55.530 回答