How to edit time in react material ui KeyboardDatePicker if time as string?

Question

I already follow the docs that works well with date object for pickup time and edit time but problem arise when i have custom time that stored in database like 04:00 PM and on edit event i have to display that time on textfield and edit but edit can't works because format is timestring.

docs: https://material-ui-pickers.dev

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

Here the relevant code :

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

score 0 · Answer 1 · answered Jun 22 '19 at 10:39

I am not sure I understand your need, I think you want to parse the value you have from string to date. You can use any library you want for this or the built-in Date in javascript, or you can make a custom function if you are confident about the input.

Example :

 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} 
    />

The parseTime function has been found in this SO answer

How to edit time in react material ui KeyboardDatePicker if time as string?

1 Answers1