Tailwind UI Datepicker选择日期时始终保存为上月日期的问题排查求助

我仔细看了你的代码和问题描述，这里有两个核心问题点可能导致你选择09-08-2021却保存为09-07-2021，我们一步步来排查解决：

1. 月份的0索引处理（你尝试过但可能没改对关键位置） #

JavaScript的Date对象月份是从0开始计数的（0对应1月，8对应9月），但你当前保存日期时直接使用selectedDate.getMonth()，这会导致月份值比实际少1。比如你选的9月会被存成08，而你期望的是09。

你需要在保存月份时给它加1，同时用slice(-2)来保证两位数的格式（比如10月会输出10而不是010）。修改getDateValue方法里的保存代码：

// 原代码
this.$refs.date.value = selectedDate.getFullYear() +"-"+ (('0'+ selectedDate.getMonth()).slice(2)) +"-"+ ('0' + selectedDate.getDate()).slice(-2);

// 修改后
this.$refs.date.value = selectedDate.getFullYear() +"-"+ (('0'+ (selectedDate.getMonth() + 1)).slice(-2)) +"-"+ ('0' + selectedDate.getDate()).slice(-2);

2. 时区偏移导致日期少一天 #

如果修改月份后还是出现日期少一天的情况，那大概率是时区问题：

• 当你用new Date(this.year, this.month, date)创建日期时，它会基于你的本地时区生成当日00:00的时间。
• 如果你所在时区是UTC以西（比如美洲地区），这个本地时间对应的UTC时间其实是前一天的下午/晚上。
• 如果后端服务是基于UTC来解析日期的，就会把这个日期识别为前一天。

解决方法是创建UTC日期并使用UTC方法获取日期组件，同时保持前端显示的本地日期不变：

// 修改后的getDateValue方法
getDateValue(date) {
  // 创建UTC日期，避免时区偏移影响保存值
  let utcDate = new Date(Date.UTC(this.year, this.month, date));
  // 前端显示仍用本地日期，保证可视化选择和显示一致
  this.datepickerValue = new Date(this.year, this.month, date).toDateString();
  // 使用UTC方法获取年、月、日，确保保存值和选择的日期一致
  this.$refs.date.value = utcDate.getUTCFullYear() +"-"+ (('0'+ (utcDate.getUTCMonth() + 1)).slice(-2)) +"-"+ ('0' + utcDate.getUTCDate()).slice(-2);
  console.log(this.$refs.date.value);
  this.showDatepicker = false;
}

你可以先尝试第一个修改，如果问题解决了就不用处理时区；如果还是有日期偏移，再用第二个方法解决时区问题。

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