html input time 24,HTML input time in 24 format

在Chrome浏览器中,HTML5的`<input type='time'>`默认显示AM/PM格式,但可以通过使用第三方库如TimePicker.js来实现始终显示24小时制。由于不是所有浏览器都支持标准的时间输入,直接依赖HTML5可能造成不一致的用户体验。这种方法通过监听时间选择的变化,将小时和分钟格式化为24小时制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

I am using below HTML tag:

In Chrome, Its showing PM/AM format, can we restrict to display 24 format always.

I dont want to use HTML5 tag

Gökhan Kurt

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;

});

There isn't a way to do this yet because the type=time element is really new.

EDIT Fixed broken link

Time:

Click the button to get the time of the time field.

Try it

function myFunction() {

var x = document.getElementById("myTime").value;

document.getElementById("demo").innerHTML = x;

}

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

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.

Tested!

In Windows -> control panel -> Region -> Additional Settings -> Time -> Short Time:

Format your time as HH:mm

in the format

hh = 12 hours

HH = 24 hours

mm = minutes

tt = AM or PM

so to get the required result the format should be HH:mm and not hh:mm tt

来源:https://stackoverflow.com/questions/32609407/html-input-time-in-24-format

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值