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)
该<input type='date'>字段采用 ISO8601 格式的值(参考),但您不应使用该Date.prototype.toISOString()函数作为其值,因为在输出 ISO8601 字符串之前,它会将日期/时间转换/表示为 UTC 标准时间(读取:更改时区) (参考)。除非你碰巧在工作或想要那个时间标准,否则你会引入一个错误,你的日期有时会改变,但并非总是如此。
获得正确输入值的唯一可靠方法<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)
这超出了原始问题的范围,但对于任何想要从 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)
谢谢你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日之前测试一样!大声笑