material-ui - 日期选择器 : timezone shift

Question

问题

如果我在 <DateInput> 中选择一个日期，日期时间在用户的时区(例如 2017-07-01T00:00:00.000+02:00)但是当它被发送到服务器时，它被转换为 UTC，因此最终为 2017-06-30T22:00:00.000 Z，落后一天。

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

什么能解决我的问题

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

日期时间与用户的时区一起发送。

日期时间作为天真的发送(=没有时区)。

用户选择的日期已被视为 UTC。

仅发送日期 (2017-07-01) 而不是 ISO 日期时间。

我试过的

我查看了 Admin-on-rest 的 DateInput documentation并且还没有找到任何改变行为的选项。

我查看了相关的 Material-UI 的 documentation唯一有点相关的选项似乎是 DateTimeFormat但尽管尝试了几次，我还是一无所获。

我检查了其他答案，例如 Material UI Time Picker UTC但无法弄清楚如何应用建议的解决方案。

Answer 1

Material 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)您可以将其直接 Hook 到 redux 并在选择两者时拍摄 Action 。

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

2)编写自己的输入组件

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