react-native-datetimepicker/datetimepicker 放假1天

Question

我很困惑这是怎么回事。我刚刚实施了 react-native-datetimepicker/datetimepicker 供用户选择他们的生日。

如果我选择 June 8, 2000 -> 返回的日期是

2000-06-09T00:00:00.000Z

，这意味着用户生日设置为 June 9, 2000.

这里是元素：

       <DateTimePicker
          value={this.props.date}
          mode={this.props.mode}
          display="calendar"
          onChange={(event, date) => {
            this.handleDatePicked(event, date)
          }}
        />

        async handleDatePicked(event, date) {
          console.log(new Date(date))
          await this.props.onSelect(this.props.propName, date)
          await this.changeState()
        }

console.log(date)

原木

2000-06-09T00:00:00.000Z

console.log(new Date(date))

原木

2000-06-09T00:00:00.000Z

但是！

console.log(new Date(date).getDate())

日志

8

当我重新打开日历时，它定在2000年6月8日。

🤯

我的思绪在爆炸——这是怎么回事？ 2000 年 6 月 8 日仅作为示例 - 无论选择什么日期、月份或年份，它都会持续关闭 1 天。我的假设可能与时区有关？非常感谢任何帮助！

Answer 1

这是因为

Date.getDate()

根据本地时间返回日期和月份。您提供的日期对象设置为 UTC 时间，这意味着当日期转换为您当地的时区时，它实际上是前一天。

要解决此问题，设置日期选择器的

timeZoneOffsetInMinutes

属性。

不幸的是，此道具在 Android 上存在已知的实现问题。一个好的替代方案可能是完全避免使用 prop，而是使用像 date-fns 这样的日期库来操作输出日期对象的时区。

Answer 2

这不是错误，但绝对令人困惑。

我已经完成了我的部分研究，发现这似乎是一个错误，但实际上不是错误。

真正的问题在于 javascript Date 对象如何解析日期字符串。

我找到的最佳答案是this stack-O answer。查看它的优秀文章。

下面是来自上面提到的答案的非常中肯的评论。 （信用：@Mizstik）

所有这些都是由于底层 Date.parse() 试图遵循 ISO 8601 的行为。当日期字符串遵循 yyyy-mm-dd 格式时，它被假定为具有隐式 UTC 00:00 的 ISO 8601。当字符串偏离格式（例如 mm-dd-yyyy 或斜线而不是连字符）时，它会根据 RFC 2822 回退到更宽松的解析器，当时区不存在时使用本地时间。不可否认，这对普通人来说都是相当神秘的。

现在我认为你安装了 react-datetime 包并附上你的输入。 然后在设置状态后，您尝试在 DOM 上打印日期。

但是它会抛出一个错误，因为 react child 不能是一个对象。所以你做了 JSON.stringify，那是当你发现日期有 1 天的时候。

这可能会发生，因为您正在为 onchange 事件使用类似的东西

onChange={(date) => setDate(date)}

但这只会将日期对象解析为字符串。您可以做的是使用 Date 对象，根据需要格式化日期。例如：

onChange={(date) => {
    const dateString = new Date(date).toLocaleDateString()
    console.log(dateString)
}}

然后您将获得格式化为您所在地区时区的日期。但是，如果您在 DatePicker 中指定了与本地时区格式不同的格式，则可以将其指定为 toLocaleDateString 的参数，例如：

new Date(date).toLocaleDateString("fr-FR")

Answer 3

我也有这个问题。我搜索了很多文档，但没有找到解决方案。所以，我只是在 onConfirm 道具中实现了这个

const tempdate = new Date(seslectedDate);
setDate(new Date(tempdate.setDate(tempdate.getDate() + 1)));