如何正确格式化 DateTime 值以适配 HTML 日期/时间选择器控件-html教程-PHP中文网

如何正确格式化 DateTime 值以适配 HTML 日期/时间选择器控件

在 ASP.NET Core Razor Pages 中通过 AJAX 获取 ISO 格式 DateTime（如 2023-10-31T15:23:55.0038809）后，需将其正确赋值给或，直接 .val() 会失败；推荐使用 valueAsDate 属性或手动截取 ISO 字符串。

在 asp.net core razor pages 中通过 ajax 获取 iso 格式 datetime（如 `2023-10-31t15:23:55.0038809`）后，需将其正确赋值给 `` 或 ``，直接 `.val()` 会失败；推荐使用 `valueasdate` 属性或手动截取 iso 字符串。

HTML 原生日期/时间输入控件（、）对输入值的格式有严格要求：

type="date" 仅接受 YYYY-MM-DD 格式字符串（如 "2023-10-31"）；
type="datetime-local" 要求 YYYY-MM-DDTHH:mm 或 YYYY-MM-DDTHH:mm:ss（秒可选，不支持毫秒和时区后缀），例如 "2023-10-31T15:23" 或 "2023-10-31T15:23:55"。

你遇到的错误源于直接将完整 ISO 8601 字符串（含毫秒与 Z/+00:00 时区信息）传入 .val()——浏览器会拒绝解析，导致赋值静默失败。

✅ 推荐方案一：使用 valueAsDate（最简洁可靠）
适用于 type="date" 和 type="datetime-local"（现代浏览器均支持）：

$.ajax({
    type: 'GET',
    url: '?handler=InitProductTransfer',
    data: { 'sourceId': sourceId, 'sourceType': sourceType }
})
.done(function (response) {
    const $timeStampInput = $modal.find('#TimeStamp');
    const date = new Date(response.timeStamp);

    // 自动适配 input 类型：date → 只设日期；datetime-local → 设完整时间
    $timeStampInput[0].valueAsDate = date;
});

⚠️ 注意：valueAsDate 会根据的 type 属性自动截取（date 类型仅保留年月日，datetime-local 保留到秒），且自动处理本地时区转换（response.timeStamp 若为 UTC，浏览器会按用户本地时区显示）。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

✅ 推荐方案二：手动构造标准格式字符串（兼容性更强）
当需精确控制格式或支持较老浏览器时：

// 对于 type="date"
$timeStampInput.val(new Date(response.timeStamp).toISOString().split('T')[0]); 
// → "2023-10-31"

// 对于 type="datetime-local"（去除毫秒和时区，保留到秒）
const dt = new Date(response.timeStamp);
const iso = dt.toISOString(); // "2023-10-31T15:23:55.003Z"
const datetimeLocal = iso.slice(0, 19); // "2023-10-31T15:23:55"
$timeStampInput.val(datetimeLocal);

? 关键注意事项：

不要使用 toLocaleString() 或 format() 等本地化方法——它们输出格式不可控，不满足 HTML 输入规范；
避免手动拼接字符串（如 date.getFullYear() + '-' + ...），易出错且忽略时区逻辑；
若后端返回的是 UTC 时间，而业务要求显示服务端时区，请在 C# 中统一转为本地时间再序列化，或在 JS 中用 toLocaleString('sv-SE') 等方式预处理（但需确保最终赋值仍符合 YYYY-MM-DD/YYYY-MM-DDTHH:mm:ss 标准）；
在 Razor 页面中，确保的 type 属性明确声明（如 type="datetime-local"），否则 valueAsDate 行为可能异常。

总结：优先使用 element.valueAsDate = new Date(isoString) —— 它语义清晰、兼容良好、无需手动格式化，是现代 Web 开发中设置日期控件值的最佳实践。