How to pass input time value for Date object?

Question

This function converts time into a 12-hour format, assigns the Stack Overflow tab to the tab for this function:

Js

function ampm(date) { var hours = date.getHours(); var minutes = date.getMinutes(); var ampm = hours >= 12 ? 'pm' : 'am'; hours = hours % 12; hours = hours ? hours : 12; // 0 should be 12 minutes = minutes < 10 ? '0'+minutes : minutes; // if minutes less than 10, add a 0 in front of it ie: 6:6 -> 6:06 var strTime = hours + ':' + minutes + ' ' + ampm; document.getElementById('time').value = strTime; return strTime; } ////This is how the value of the time input is supposed to be displayed in 12 hr format _("display_time").innerHTML = ampm(new Date()); 

HTML

 <!--This is the input field where a user selects a time--> <input id="time" placeholder="Time" type="time" name="time" /> <!--This is where the value of the time input is supposed to be displayed in 12 hr format-->> <span id="display_time"></span> 

My question is how to get the value of the time input field that will be displayed on the span tag in 12hr format. This code is half working.

Displays time in 12-hour format, but displays only the current time. The flowchart will be something like: the user selects the time in the input time → some JS to convert to 12 hours format → is displayed as a 12-hour format in the span tag. Any tips or suggestions?

Answer 1

There is no need to use Date , and its methods are String , so it is better to use the .split(":") method, and you will immediately get the values ​​of hours and minutes .

Then just check if their values ​​are below 10 add the leading 0 , and if hours higher than 12 , use pm suffix or use am otherwise.

This is a live DEMO using the onchange time input event with its value as the onchange="ampm(this.value) :

 function ampm(time) { console.log(time); if (time.value !== "") { var hours = time.split(":")[0]; var minutes = time.split(":")[1]; var suffix = hours >= 12 ? "pm" : "am"; hours = hours % 12 || 12; hours = hours < 10 ? "0" + hours : hours; var displayTime = hours + ":" + minutes + " " + suffix; document.getElementById("display_time").innerHTML = displayTime; } } 

 <!--This is the input field where a user selects a time--> <input id="time" placeholder="Time" type="time" name="time" onchange="ampm(this.value)" /> <span id="display_time"></span> 

Answer 2

Your input value will be a string, not a date. I created jsfiddle where I changed your javascript to work with string.

 $('#time').on('change', function() { var date = $('#time').val().split(':'); var hours = date[0]; var minutes = date[1]; $('#display_time').text(ampm(hours, minutes)); }); function ampm(hours, minutes) { var ampm = hours >= 12 ? 'pm' : 'am'; hours = hours % 12 || 12; minutes = minutes || 0; minutes = minutes < 10 ? '0'+minutes : minutes; return hours + ':' + minutes + ' ' + ampm; } 

Answer 3

Something like this will do it

 function showTime() { //Grab the time and split into hrs and mins var time = document.getElementById("time"); if ( time.value === "") { document.getElementById("mySpan").innerHTML = ""; return false; } var hrs = time.value.split(":")[0]; var mins = time.value.split(":")[1]; var newTime = ampm(hrs, mins); document.getElementById("mySpan").innerHTML = newTime; } function ampm(hrs, mins) { return ( hrs % 12 || 12 ) + ":" + mins + (( hrs >= 12 ) ? "PM" : "AM" ); } 

Here is an example. showTime() just needs to start changing the time input.