DatePicker时间不一致修复：startDateTest多7小时如何解决？

todayDateTime显示的时间正确，但从datepicker中获取的startDateTest时间多了7小时，希望无需手动减去小时即可显示正确时间。

相关代码：

function setDatePicker() {
  $('.datepicker').datepicker();

  success: function(data) {
    var todayDateTime = eval(data.date.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
    var todayDate = eval(data.date.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
    todayDate.setHours(0, 0, 0, 0);

    var newDateObj = new Date();
    var n = todayDateTime.getHours();
    if (n < 7) {
      todayDateTime.setHours(7, 0, 0, 0);
    }
    newDateObj.setTime(todayDateTime.getTime() + (30 * 60 * 1000));

    $('#dpVBH_START_DATE').datepicker({
      autoclose: true
    });
    $("#dpVBH_START_DATE").datepicker("setDate", todayDateTime);
    $("#dpVBH_START_TIME").data("kendoTimePicker").value(todayDateTime);
    $('#dpVBH_FINISH_DATE').datepicker({
      autoclose: true
    });
    $("#dpVBH_FINISH_DATE").datepicker("setDate", newDateObj);
    $("#dpVBH_FINISH_TIME").data("kendoTimePicker").value(newDateObj);

    var startdatetest = $("#dpvbh_start_date").data('datepicker').date;
    console.log("startDateTest", startDateTest);
    console.log("todayDateTime", todayDateTime);
    console.log("todayDate", todayDate);
  }
}

相关截图：

这是jQuery Datepicker的时区处理逻辑导致的：当用setDate传入本地时区的Date对象时，Datepicker内部会将其转换为UTC时间存储，获取.date属性时又转回本地时间，刚好和你的本地时区（GMT+0700）偏移7小时，所以出现时间多7小时的问题。另外代码里用eval解析日期存在安全风险，也需要优化。

1. 替换不安全的日期解析方式 #

把依赖eval的日期解析换成更安全的时间戳提取方式：

// 替换原来的eval解析代码
var timestampMatch = data.date.match(/\/Date\((\d+)\)\//);
var timestamp = timestampMatch ? parseInt(timestampMatch[1], 10) : Date.now();
var todayDateTime = new Date(timestamp);
var todayDate = new Date(timestamp);
todayDate.setHours(0, 0, 0, 0);

2. 让Datepicker使用本地时区存储日期 #

初始化Datepicker时，直接传入本地日期字符串而非Date对象，避免时区转换：

// 将Date对象转为本地日期字符串后设置给Datepicker
var localDateStr = todayDateTime.toLocaleDateString();
$("#dpVBH_START_DATE").datepicker("setDate", localDateStr);

// 结束日期同理
var finishLocalDateStr = newDateObj.toLocaleDateString();
$("#dpVBH_FINISH_DATE").datepicker("setDate", finishLocalDateStr);

3. 获取格式化后的日期而非原始Date对象 #

如果只需要和界面显示一致的日期，直接调用Datepicker的格式化方法：

var startDateTest = $("#dpvbh_start_date").datepicker("getFormattedDate");
console.log("startDateTest", startDateTest);

4. 同步Kendo Timepicker的时区设置 #

确保Kendo时间选择器和Datepicker时区一致，初始化时指定本地时区：

// 初始化时设置时区（替换为你的实际时区，比如GMT+7对应Asia/Bangkok）
$("#dpVBH_START_TIME").kendoTimePicker({
  timezone: "Asia/Bangkok",
  // 其他原有配置
});

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