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

MyT*_*der 19 javascript html5 date input

我试图将日期预填充到html"日期"输入字段中,但它忽略了我尝试传递的值:

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

<script>
...
var myDate = new Date();
$("#date").val(myDate);
...
Run Code Online (Sandbox Code Playgroud)

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

var myDate = new Date().toDateString();
$("#date").val(myDate);
Run Code Online (Sandbox Code Playgroud)

当我打开表单时,日期字段为空.如果我删除了type ="date"标记,则该值显示为字符串,但之后我无法访问datepicker.如何预先填充日期输入并仍使用日期选择器?我很难过.

谢谢.

Rob*_*ler 44

必须以ISO格式设置.

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

})()
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/GZ46K/

  • 除了toISOString将为您提供一个很可能不是您想要的UTC日期. (6认同)
  • 这是一个错误的答案,因为它可能会导致很难追踪错误 - 因为,正如 terrinecold 所指出的,它会给你一个 UTC 日期。如果您的日期在不同的时区,它可能会产生与您开始的日期不同的日期(在您当地的时区)。 (2认同)

gwe*_*ter 7

为什么不使用 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);
*/
Run Code Online (Sandbox Code Playgroud)
<input id='date' type='date'>
Run Code Online (Sandbox Code Playgroud)

从不更改时区的日期对象填充 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]);
*/
Run Code Online (Sandbox Code Playgroud)
<input type='date' id='date'>
<input type='time' id='time' step="1">
Run Code Online (Sandbox Code Playgroud)


MyT*_*der 6

谢谢你j08691.这个链接就是答案.

对于像我这样苦苦挣扎的其他人,当他们说输入是"yyyy-mm-dd"的意思吧!

你必须有4位数的年份.你必须有一个破折号,没有空格.你必须有2位数的日期和月份.

在我的例子中,1月的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);
Run Code Online (Sandbox Code Playgroud)

我希望这可以帮助别人不要浪费时间,就像我在10月之前或本月10日之前测试一样!大声笑