How to change the format of time?

user_17003516 0
Viewed 157

I've an input of type time, when I click on it I can select an hour from 1-12, mins and AM/PM. snapshot

When I render the selection it appears in 24-hour format. However, instead, I want it to be in a 12-hour format.
I'm working on a react-redux app.

<input type='time' 
          onChange={(e) => this.setState({
            time: e.target.value
          })}
          value={this.state.time} />

state = {
    time: ''
  }
  render = () => {
    return (
      <span>{time}</span>
    )
  }
jsx redux reactjs javascript
1 Answers

you can use this function for changing time format:

const timeConvertor = (time) => {
  // first checks the correct time format and then split it into components
  time = time.toString ().match (/^([01]\d|2[0-3])(:)([0-5]\d)(:[0-5]\d)?$/) || [time];

  if (time.length > 1) { // If the time format is correct
    time = time.slice (1);  // Remove full string match value
    time[5] = +time[0] < 12 ? 'AM' : 'PM'; // Set AM/PM based on given hour
    time[0] = +time[0] % 12 || 12; // change the hour based on AM/PM
  }
  return time.join (''); // return new time format as a String
}

for example:

timeConvertor('20:50:00'); // will return '8:50:00PM'
user_108664530
Related