Question

我已经按照日期对象的拾取时间和编辑时间很好地使用了文档，但是当我将自定义时间存储在数据库中时（例如04:00 PM），并且在编辑事件中我必须在文本字段上显示该时间，并出现问题编辑，但是编辑不起作用，因为格式为时间字符串。

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

Answer 1

我不确定我是否理解您的需求，我想您想解析从字符串到日期的值。您可以为此使用任何库，也可以使用javascript中内置的Date，或者如果对输入有信心，可以使用自定义函数。

示例：

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

已找到in this SO answer

parseTime函数

如果时间为字符串，如何在React Material UI KeyboardDatePicker中编辑时间？

1 个答案: