处理时间选择器，包括小时，分钟，上午，下午和时间

Question

我正在创造一个有趣的时间选择器。我可以创建一个时间选择器，可以选择并显示所选时间。用户可以选择上午或下午。但是现在我可以将时间保存为'09：30'格式而不是我希望显示'09：30 am'或'09:30 pm'格式。我如何单独处理上午，下午，小时和分钟，因为在我的时间选择器中我已经分别显示小时，分钟和上午，下午和合并一个显示为标题所以我可以使用该时间发送到服务器，如果我想在未来。我该如何处理？

这是我现在创建的解决方法

有人可以帮助我吗？

https://codesandbox.io/s/lpyqy3mo99

这也是代码

class TimePicker extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      time: this.convertTime(props.time),
      hourTime: this.convertTime(props.time),
      selectedNumber: 1,
      meridian: "am",
      minutes: this.calculateMinutes(props.time),
      hasError: false
    };
  }

  convertTime = time => {
    const splittedTime = time && time.split(":");
    const hour = splittedTime && splittedTime[0];
    if (hour > 12) {
      // const hour = time.split(':')[0];
      const momentInstance = moment(time, "hhmm");
      const twelveHourTime = momentInstance.format("h:mm");
      console.log("twelveHourTime", twelveHourTime);
      return twelveHourTime;
    }

    return props.time;
  };

  calculateMinutes = time => {
    const splittedTime = time && time.split(':');
    return splittedTime[1];
  }

  handleClick(time) {
    const { meridian, minutes } = this.state;
    const hourTime = moment(`${time}:${minutes}`, [
      "hhmm"
    ]).format("h:mm");
    this.setState(
      {
        time,
        selectedNumber: time,
        hourTime
      },
      () => this.props.onClick(hourTime)
    );
  }

  handleTimeAmPm(meridian) {
    const { time, minutes } = this.state;
    // const hourTime = moment(`${time}:${minutes} ${meridian}`, [
    //   "h:mm A"
    // ]).format("HH:mm");
    this.setState({ meridian }, () => this.props.onClick(this.state.hourTime));
  }

  handleMinutes = e => {
    const { value, min, max } = e.target;
    if (value >= min && value < max) {
      const hourTime = moment(
        `${this.state.time}:${value}}`,
        ["hhmm"]
      ).format("h:mm");
      if (value.length < 2) {
        this.setState({ minutes: "0" + value.slice(-2), hourTime }, () =>
          this.props.onClick(this.state.hourTime)
        );
      } else {
        this.setState({ minutes: value.slice(-2), hourTime }, () =>
          this.props.onClick(this.state.hourTime)
        );
      }
    } else {
      this.setState({ minutes: "00", hasError: true });
    }
  };

  render() {
    let time = [];
    for (let i = 1; i <= 12; i++) {
      time.push(
        <div
          className={this.state.selectedNumber === i ? "hand selected" : "hand"}
          key={i}
          onClick={() => this.handleClick(i)}
        >
          {i}
        </div>
      );
    }
    return (
      <div className="card card-md" style={{ width: "100%", maxWidth: "100%" }}>
        <div className="time-date">
          <div className="display">
            <div className="content">
              <div className="main-title">
                {this.state.hourTime}{this.state.meridian}
              </div>
            </div>
          </div>
          <div className="control">
            <div className="slider">
              <div className="time-control">
                <div className="clock">
                  <div className="clock-face">
                    <div className="center" />
                    {time}
                  </div>
                </div>
                <div className="actions">
                  <div className="am" onClick={() => this.handleTimeAmPm("am")}>
                    am
                  </div>
                  <div className="minutes">
                    <div className={this.state.hasError && "input error"}>
                      <input
                        type="number"
                        min={0}
                        max={60}
                        value={this.state.minutes}
                        onChange={this.handleMinutes}
                      />
                    </div>
                  </div>
                  <div className="pm" onClick={() => this.handleTimeAmPm("pm")}>
                    pm
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default TimePicker;

更新

我可以处理单独的小时，分​​钟，上午，下午，但无法在所有这些元素中存储hourTime（小时上午/下午）。