Chrome中date类型input赋值失败，IE正常，求解决方法

没错，Chrome（以及Firefox、Edge等现代标准浏览器）对input[type=date]的value处理确实和IE有差异——根源在于HTML5规范对date输入框的value格式有严格要求，而IE采用了更宽松的兼容处理。

核心原因 #

根据HTML5标准，input[type=date]的value必须是ISO 8601格式的字符串，也就是YYYY-MM-DD（例如2018-05-16）。而IE出于兼容性考虑，允许使用本地化的日期格式（比如你用的MM/DD/YYYY），但Chrome等现代浏览器严格遵循规范，非ISO格式的字符串会被忽略，导致赋值失败。

解决方案 #

你有几种可行的处理方式：

1. 直接使用ISO格式赋值

这是最简单的方法，把日期字符串改成YYYY-MM-DD格式即可：

$('#assignDates').on('click', function(e){ 
  $('#textDate').val('5/16/2018'); 
  $('#dateDate').val('2018-05-16'); // 改用ISO格式
});

这样修改后，Chrome、IE以及其他现代浏览器都能正常为date输入框赋值。

2. 转换本地格式为ISO格式

如果你的日期数据原本就是MM/DD/YYYY这类本地化格式，可以写一个简单的转换函数：

function convertToISO(dateStr) {
  const parts = dateStr.split('/');
  // 补零确保月份、日期是两位数字
  return `${parts[2]}-${parts[0].padStart(2, '0')}-${parts[1].padStart(2, '0')}`;
}

// 使用示例
$('#assignDates').on('click', function(e){ 
  const localDate = '5/16/2018';
  $('#textDate').val(localDate); 
  $('#dateDate').val(convertToISO(localDate));
});

3. 通过Date对象转换（注意时区陷阱）

你提到是否需要传入Date对象——其实不需要直接传Date对象，但可以用Date对象辅助转换，不过要注意时区问题：如果直接用new Date(dateStr).toISOString()，可能会因为时区偏移导致日期变成前一天（比如本地时间5/16/2018的午夜，UTC时间可能是5/15/2018），所以更稳妥的是手动处理字符串，或者使用UTC方法：

function dateToISO(dateStr) {
  const date = new Date(dateStr);
  return `${date.getUTCFullYear()}-${String(date.getUTCMonth() + 1).padStart(2, '0')}-${String(date.getUTCDate()).padStart(2, '0')}`;
}

不过这种方式不如直接字符串转换可靠，尤其是当你的日期字符串格式不统一时。

验证修改后的代码 #

修改后的完整示例代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
input[type=text]: <input type='text' id='textDate' /><br/>
input[type=date]: <input type='date' id='dateDate' /><br/>
<input type='button' id='assignDates' value='Assign Dates' />

<script>
$('#assignDates').on('click', function(e){ 
  $('#textDate').val('5/16/2018'); 
  $('#dateDate').val('2018-05-16');
});
</script>

点击按钮后，Chrome和IE都会同时为两个输入框成功赋值。

内容的提问来源于stack exchange，提问作者Matt Spinks