Как редактировать время в пользовательском интерфейсе KeyboardDatePicker, если время в виде строки? - PullRequest
Новая
       16

Как редактировать время в пользовательском интерфейсе KeyboardDatePicker, если время в виде строки?

0 голосов
/ 22 июня 2019

Я уже слежу за документацией, которая хорошо работает с объектом даты для времени получения и редактирования, но проблема возникает, когда у меня есть пользовательское время, которое хранится в базе данных, например, в 16:00, и при событии редактирования мне нужно отобразить это время в текстовом поле иредактировать, но редактирование не работает, потому что формат является временной.

документы: https://material -ui-pickers.dev

https://codesandbox.io/s/lucid-varahamihira-2unp9

Вот соответствующий код: 

handleStartTimeChange(date) {
    this.setState({
      offerStartTime: date
    });
  }
  editTime() {
    this.setState({
      custom_time: "03:00 PM"
    });
  }
  render() {
    return (
      <div className="app">
        <Timepicker
          value={this.state.offerStartTime}
          onChange={date => this.handleStartTimeChange(date)}
          inputValue={this.state.custom_time}
        />
        <button onClick={() => this.editTime()} style={{ marginTop: "0px" }}>
          Edit
        </button>
      </div>
    );
  }

1 Ответ

0 голосов
/ 22 июня 2019

Я не уверен, что понимаю ваши потребности, я думаю, что вы хотите проанализировать значение, которое вы имеете от строки к дате. Вы можете использовать любую библиотеку для этого или встроенную Date в javascript, или вы можете сделать пользовательскую функцию, если уверены в вводе.

Пример: 

 editTime() {
    this.setState({
      offerStartTime: parseTime("03:00 PM")
    });
  }

function parseTime( t ) {
   var d = new Date();
   var time = t.match( /(\d+)(?::(\d\d))?\s*(p?)/ );
   d.setHours( parseInt( time[1]) + (time[3] ? 12 : 0) );
   d.setMinutes( parseInt( time[2]) || 0 );
   return d;
}

//render
    <Timepicker
          value={this.state.offerStartTime}
          onChange={date => this.handleStartTimeChange(date)}
         // I am not sure you need this : inputValue={this.state.custom_time} 
    />

Функция parseTime была найдена в этом ответе SO

...