title: handle time picker with hour, minute, am, pm and time
body: <p>I am creating a time picker for fun. I could create a time picker which can be selected and show the selected time. User can select am or pm either. But for now I could save the time as '09:30' format only rather I want to show '09:30 am' or '09:30 pm' format. How do I handle am, pm, hour and minutes separately because in my time picker I have shown hour, minutes and am, pm separately and merged one is shown as the title so I can use that time for sending to the server if I want in future. How do I handle such? </p>
  
  <p>Here is a workaround I have created for now</p>
  
  <p>Can anyone help me at this?</p>
  
  <p><a href="https://codesandbox.io/s/lpyqy3mo99" rel="nofollow noreferrer">https://codesandbox.io/s/lpyqy3mo99</a></p>
  
  <p>Here is the code too</p>
  
  <pre><code>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 =&gt; {
      const splittedTime = time &amp;&amp; time.split(":");
      const hour = splittedTime &amp;&amp; splittedTime[0];
      if (hour &gt; 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 =&gt; {
      const splittedTime = time &amp;&amp; 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
        },
        () =&gt; 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 }, () =&gt; this.props.onClick(this.state.hourTime));
    }
  
    handleMinutes = e =&gt; {
      const { value, min, max } = e.target;
      if (value &gt;= min &amp;&amp; value &lt; max) {
        const hourTime = moment(
          `${this.state.time}:${value}}`,
          ["hhmm"]
        ).format("h:mm");
        if (value.length &lt; 2) {
          this.setState({ minutes: "0" + value.slice(-2), hourTime }, () =&gt;
            this.props.onClick(this.state.hourTime)
          );
        } else {
          this.setState({ minutes: value.slice(-2), hourTime }, () =&gt;
            this.props.onClick(this.state.hourTime)
          );
        }
      } else {
        this.setState({ minutes: "00", hasError: true });
      }
    };
  
    render() {
      let time = [];
      for (let i = 1; i &lt;= 12; i++) {
        time.push(
          &lt;div
            className={this.state.selectedNumber === i ? "hand selected" : "hand"}
            key={i}
            onClick={() =&gt; this.handleClick(i)}
          &gt;
            {i}
          &lt;/div&gt;
        );
      }
      return (
        &lt;div className="card card-md" style={{ width: "100%", maxWidth: "100%" }}&gt;
          &lt;div className="time-date"&gt;
            &lt;div className="display"&gt;
              &lt;div className="content"&gt;
                &lt;div className="main-title"&gt;
                  {this.state.hourTime}{this.state.meridian}
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div className="control"&gt;
              &lt;div className="slider"&gt;
                &lt;div className="time-control"&gt;
                  &lt;div className="clock"&gt;
                    &lt;div className="clock-face"&gt;
                      &lt;div className="center" /&gt;
                      {time}
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="actions"&gt;
                    &lt;div className="am" onClick={() =&gt; this.handleTimeAmPm("am")}&gt;
                      am
                    &lt;/div&gt;
                    &lt;div className="minutes"&gt;
                      &lt;div className={this.state.hasError &amp;&amp; "input error"}&gt;
                        &lt;input
                          type="number"
                          min={0}
                          max={60}
                          value={this.state.minutes}
                          onChange={this.handleMinutes}
                        /&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div className="pm" onClick={() =&gt; this.handleTimeAmPm("pm")}&gt;
                      pm
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default TimePicker;
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>I could handle the separate hour, minute, am, pm but could not store hourTime in all these elements(hour minue am/pm).</p>