如何使用react day picker发布正确的工作日

Question

在我的React应用程序中，我试图使用库react-day-picker向服务器发送周值https://react-day-picker.js.org/examples/selected-week但是它以一天的间隔向服务器发布值。

例如，当我在客户端中选择2021-03-07到2021-03-13之间的一周时，我可以在日志中看到该周的发送是正确的，但在服务器中，我得到的值有1天的偏移量，如下所示：

selectedDays: [
'2021-03-06T22:00:00.000Z',
'2021-03-07T22:00:00.000Z',
'2021-03-08T22:00:00.000Z',
'2021-03-09T22:00:00.000Z',
'2021-03-10T22:00:00.000Z',
'2021-03-11T22:00:00.000Z',
'2021-03-12T22:00:00.000Z'
]

这是我的客户端代码：

console.log(data);
// I get here the correct week values
axios({
method: "post",
url: "http://localhost:3001/",
data: data,
}).then(
(res) => {
console.log(res);
},
(error) => {
console.log(error);
}
);

我的服务器代码：

exports.createNewGoals = async (request, response) => {

// I get here the values with one day interval.
console.log(request.body.selectedDays);
}

我猜这可能与本地化设置有关，但我没有定义任何自定义的本地化设置。我在Chrome浏览器的Windows机器上本地运行这个项目。

日期在哪里更改？如何正确配置？

如有任何帮助，将不胜感激

Answer 1

这确实是时区不匹配。客户端正在向服务器发送本地时间，服务器正在将其解析/保存为UTC，由于您的时区早于GMT，因此12:00AM将总是晚一天。服务器可能配置为GMT，这是一种很好的做法，因为web服务器将有多个时区的用户，因此它需要一种通用的方法来准确存储时间。如果你不需要转换，有几种方法取决于你的控制和要求：

1. 在客户端上转换为UTC

在getWeekDays的示例沙盒中，客户端选择本地时间的日期，并使用时刻库，然后转换回日期。默认情况下，它是在用户时间内准确捕捉用户的选择，其中包括他们的时区偏移：

Sun Mar 14 2021 00:00:00 GMT-0500 (Eastern Standard Time), 
Mon Mar 15 2021 00:00:00 GMT-0400 (Eastern Daylight Time), 
Tue Mar 16 2021 00:00:00 GMT-0400 (Eastern Daylight Time), 
Wed Mar 17 2021 00:00:00 GMT-0400 (Eastern Daylight Time), 
Thu Mar 18 2021 00:00:00 GMT-0400 (Eastern Daylight Time), 
Fri Mar 19 2021 00:00:00 GMT-0400 (Eastern Daylight Time), 
Sat Mar 20 2021 00:00:00 GMT-0400 (Eastern Daylight Time)

如果要捕获用户单击的日历日期，可以在使用.utc(true)转换为JavaScript日期之前转换为UTC而不更改时间。这是将Date的值设置为">UTC时间12:00AM时此位置的时间"。客户端将在本地发送，但当在服务器上转换时，它将转换回预期日期的12:00UTC：

function getWeekDays(weekStart) {
const days = [moment(weekStart).utc(true).toDate()];
for (let i = 1; i < 7; i += 1) {
days.push(
moment(weekStart)
.add(i, 'days')
.utc(true).toDate()
);
}
console.log (days);
return days;
}

结果如下。(*注意，上周我们的偏移量发生变化时，我特意选择了这一点——这对服务器来说并不重要(：

Sat Mar 13 2021 19:00:00 GMT-0500 (Eastern Standard Time)
Sun Mar 14 2021 20:00:00 GMT-0400 (Eastern Daylight Time)
Mon Mar 15 2021 20:00:00 GMT-0400 (Eastern Daylight Time)
Tue Mar 16 2021 20:00:00 GMT-0400 (Eastern Daylight Time)
Wed Mar 17 2021 20:00:00 GMT-0400 (Eastern Daylight Time)
Thu Mar 18 2021 20:00:00 GMT-0400 (Eastern Daylight Time)
Fri Mar 19 2021 20:00:00 GMT-0400 (Eastern Daylight Time)

2. 只发送日期

如果不需要时间转换，只发送一个没有时间的日期通常会简单得多：

function getWeekDays(weekStart) {
const days = [moment(weekStart).format('YYYY-MM-DD')];
for (let i = 1; i < 7; i += 1) {
days.push(
moment(weekStart)
.add(i, 'days')
.format('YYYY-MM-DD')
);
}
console.log (days);
return days;
}

3. 在服务器上转换为本地

类似地，在服务器上，您可以将客户端时间转换为本地时间。这是由请求解析器上的类型处理程序决定的，但可以将其转换回本地以获取用户的本地日期：

exports.createNewGoals = async (request, response) => {

// I get here the values with one day interval.
request.body.selectedDays.forEach(dt=> console.log(moment(dt).local()));
}

或者更简单地避免任何时间混淆，将其键入字符串，然后忽略本地时间组件：

exports.createNewGoals = async (request, response) => {

// I get here the values with one day interval.
request.body.selectedDays.forEach(dt=> console.log(dt.substring(0, 10)));
}