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