日期选择器：时区偏移

Question

问题

如果我在中选择一个日期<DateInput>，则datetime在用户的时区中（例如2017-07-01T00：00：00.000 + 02：00），但是当它发送到服务器时，它会转换为UTC并最终以2017- 06-30T22：00：00.000Z，落后一天。

底层后端不知道用户的时区，因此无法将日期后移，因此在剥离时间后，日期将以错误的日期结束。

什么会解决我的问题

这些选项中的任何一个都可以正常工作：

1. 日期时间与用户的时区一起发送。
2. datetime是天真的（=没有时区）。
3. 用户选择的日期已被视为UTC。
4. 仅发送日期（2017-07-01）而不是ISO日期时间。

我尝试了什么

• 我查看了Admin-on-rest的DateInput 文档，但没有找到任何更改行为的选择。
• 我查看了相关的Material-UI 文档，似乎唯一相关的选项是，DateTimeFormat但是尽管尝试了几次，但还是无济于事。
• 我检查了其他答案，例如Material UI Time Picker UTC，但无法弄清楚如何应用建议的解决方案。

Answer 1

材质 UI 日期和时间选择器返回本地值。您可以在他们的 onChange 函数中编写一个函数来将日期重新格式化为任何值。

  handleTimeInput = (event, time) => {
    this.setState({
      time: time
    })
  }

然后，您可以通过使用如下所示的简单函数将本地时间转换为 UTC 来重置发送到服务器的时间

export default (date) => {
  return new Date(date.getTime() + date.getTimezoneOffset()*60000)
}

（用于展示）

export default (date) => {
  const tempDate = new Date(date)
  return new Date(tempDate.getTime() - tempDate.getTimezoneOffset()*60000)
}

这是我的comp的整个组件代码。

class DateTimePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: null,
      time: null
    };
  }
  handleDateInput = (event, date) => {
    this.setState({
      date: date
    })
  }
  handleTimeInput = (event, time) => {
    this.setState({
      time: time
    })
  }
  componentDidUpdate(prevProps, prevState) {
    const {setSchedule, channel} = this.props
    if (prevState.date !== this.state.date || prevState.time !== this.state.time) {
      if (this.state.date && this.state.time) {
        setSchedule(convertISTtoUTC(concatenateDateAndTime(this.state.date, this.state.time)), channel)
      }
    }
  }
  render() {
    return (
      <div >
          <DatePicker autoOk={true} onChange={this.handleDateInput} />
          <TimePicker autoOk={true} pedantic={true} onChange={this.handleTimeInput} />
      </div>
    )
  }
}

有了这个，您有 2 个选择。

1）您可以将其直接挂钩到 redux 并在选择两者时拍摄动作。

https://marmelab.com/admin-on-rest/Actions.html

2）编写自己的输入组件

https://marmelab.com/admin-on-rest/Inputs.html#writing-your-own-input-component