Question

如何连接react js中的日期和时间值。对于日期和时间选择，我使用材质UI datepicker和timepicker来选择我的示例代码的日期和时间。

selectDate(event, date) {
  this.setState({
    updatedDate: moment(date).format('DD-MM-YYYY'),
  });
}

selectTime(event, time) {
  this.setState({
    startime: moment(time).format('HH:mm')
  });
}

我想转换为YYYY-MM-DDThh:mm:ss这种格式

Answer 1

如果它确实必须始终保持状态的日期时间字符串，那么这些行中的某些内容应该起作用（即采用先前设置的状态字符串，转换为moment对象，仅修改相关部分，然后再次将状态作为字符串应用回来）

format = 'YYYY-MM-DDThh:mm:ss'

selectDate = (event, date) => this.setState( d => prevState => ({
    datetimeStr: (moment(prevState.datetimeStr, this.format) || d)
                    .year(d.year()).month(d.month()).date(d.date())
                      .format(this.format)
  })(moment(date)))


selectTime = (event, time) => this.setState( d => prevState => ({
    datetimeStr: (moment(prevState.datetimeStr, this.format) || d)
                    .hour(d.hour()).minutes(d.minutes())
                      .format(this.format)
  })(moment(time)))

但是如果它们作为实际的Date对象存储在状态中并且在某些输出中仅在需要时作为字符串组合/格式化时会更灵活，这样如果需要在不同的地方以不同的方式进行格式化，您仍然可以派生它来自同一个州

selectDate = (event, date) => this.setState({date})

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

getSelectedDatetimeStr = () => {
  const date = moment(this.state.date || {})
  const time = moment(this.state.time || {})
  return moment({
    year: date.year(),
    month: date.month(),
    day: date.date(),
    hours: time.hours(),
    minute: time.minutes()
  }).format('YYYY-MM-DDThh:mm:ss')
}

日期和时间连接反应Js中的值

1 个答案: