24种格式的 HTML 输入时间

我使用下面的 HTML 标签:

<input type="time"  />

在 Chrome 中，它的显示 PM/AM 格式，可以限制我们总是显示24格式。 我不想使用 HTML5标签

237542 次浏览
小开
最佳答案

As stated in this answer not all browsers support the standard way. It is not a good idea to use for robust user experience. And if you use it, you cannot ask too much.

Instead use time-picker libraries. For example: TimePicker.js is a zero dependency and lightweight library. Use it like:

var timepicker = new TimePicker('time', {
lang: 'en',
theme: 'dark'
});
timepicker.on('change', function(evt) {
  

var value = (evt.hour || '00') + ':' + (evt.minute || '00');
evt.element.value = value;


});
<script src="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<link href="https://cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css" rel="stylesheet"/>


<div>
<input type="text" id="time" placeholder="Time">
</div>

More info about the time input can be found on MDN Web Docs

小开

You can't do it with the HTML5 input type. There are many libs available to do it, you can use momentjs or some other jQuery UI components for the best outcome.

小开 

<!DOCTYPE html>
<html>
<body>
Time: <input type="time" id="myTime" value="16:32:55">


<p>Click the button to get the time of the time field.</p>


<button onclick="myFunction()">Try it</button>


<p id="demo"></p>


<script>
function myFunction() {
var x = document.getElementById("myTime").value;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>

I found that by setting value field (not just what is given below) time input will be internally converted into the 24hr format.

小开

In my case, it is taking time in AM and PM but sending data in 00-24 hours format to the server on form submit. and when use that DB data in its value then it will automatically select the appropriate AM or PM to edit form value.


提交答案