如何将发货日期时间输入框默认值设为用户时区的当前时间

实现方案 #

1. 调整服务端代码 #

先去掉服务端给DateShipped赋值默认值的逻辑，避免服务端时区的时间覆盖前端赋值的用户本地时间：

public IActionResult OnGet()
{
    TransloadingDetail = new(); 
    // 移除DateShipped = DateTime.Now的赋值逻辑
    return Page();
}

2. 前端JS赋值本地时间 #

asp-for绑定DateTime类型时，默认会给input生成type="datetime-local"属性，该类型的输入框要求值的格式为YYYY-MM-DDThh:mm，我们只需要把用户本地的当前时间格式化为该格式后赋值即可。

补充说明：你之前对new Date()的理解存在偏差，new Date()本身是基于用户设备本地时区创建的时间对象，仅当调用toUTCString()等专门方法时才会返回UTC时间，直接取本地时间的年月日时分即可满足需求。

原生JS实现代码：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取当前本地时间
    const now = new Date();
    // 格式化时间为datetime-local要求的格式，自动补前导零
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const localDatetime = `${year}-${month}-${day}T${hours}:${minutes}`;
    // 赋值给输入框，asp-for生成的id为TransloadingDetail_DateShipped
    document.getElementById('TransloadingDetail_DateShipped').value = localDatetime;
});

jQuery实现代码（如果项目已引入jQuery）：

$(function() {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const localDatetime = `${year}-${month}-${day}T${hours}:${minutes}`;
    $('input[name="TransloadingDetail.DateShipped"]').val(localDatetime);
});

可选补充：服务端接收后的处理 #

如果你的业务需要存储UTC标准时间，拿到前端提交的DateShipped后，可以调用DateTime.SpecifyKind(TransloadingDetail.DateShipped, DateTimeKind.Local).ToUniversalTime()转为UTC时间再存储，避免跨时区使用时出现时间混乱。

内容的提问来源于stack exchange，提问作者Jonathan Wood