HTML5 input type time setting values not working

This worked for me :

<input class="form-control" type="time" name="time" value="<?=date("H:i", strtotime($dbObject['time'])); ?>" />

In this way, one can fetch the time column and display it like this using PHP and mysql.


Stephen, Giri, all you have to do, in order to get AM/PM set, is to convert your 12-hour time string into 24-hour one, before passing it to the value attribute of input [type=time].

Here is a quick example how to convert 12-hour -> 24-hour time string.

const am_pm_to_hours = time => {
    let hours = Number(time.match(/^(\d+)/)[1]);
    let minutes = Number(time.match(/:(\d+)/)[1]);
    const AMPM = time.match(/\s(.*)$/)[1];
    if (AMPM.toLowerCase() === "pm" && hours < 12) hours = hours + 12;
    if (AMPM.toLowerCase() === "am" && hours == 12) hours = hours - 12;

    let sHours = hours.toString();
    let sMinutes = minutes.toString();
    if (hours < 10) sHours = "0" + sHours;
    if (minutes < 10) sMinutes = "0" + sMinutes;

    return `${sHours}:${sMinutes}`;
}

hope this helps :)


It's based on 24-hour time, therefore use value="08:56" for AM and value="20:56" for PM.

Example Here

<input type="time" value="08:56">

See: http://www.w3.org/TR/html-markup/input.time.html