日期和时间连接react Js中的值

Question

how to concatenate the date and time value in react js. for date and time picking i am using material UI datepicker and timepicker for selecting the date and time this my example code.

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

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

i want to convert to YYYY-MM-DDThh:mm:ss this format

Answer 1

If it really has to remain a datetime string in state at all times then something along these lines should work (ie taking the previous set state string, converting to a moment object, modifying the relevant parts only, then applying back to state as a string again)

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)))

But would be far more flexible if they are both stored in state as actual Date objects and only combined/formatted when needed as a string in some output, that way if need to be formatted differently in different places you can still derive it from the same state

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')
}