In different browsers input time field shows in di

Question

I have created an input time HTML element, with this line:

<input type="time" id="startTime" value="@DateTime.Now.ToString("HH:mm")" />

I am using C# Razor syntax, but it does not really matter.

I checked it in both Google Chrome and Mozilla Firefox and in both time is represented in 24 hour format. Later, when I shared the code with my colleagues, in their versions of Chrome the time is represented in 12-hour format with AM and PM. Is there a way to specify in my HTML code that time should be represented in one way in all browsers.

There is similar question here, but however it was asked 3 years ago and the accepted answer starts with:

This feature is still in draft. Each browser shows it differently.

so I am wondering if that issue has been resolved in the meantime. If not, any suggestions of good time components are welcome. The simplest way that comes to my mind is to use separate select tags, but I would prefer to use single component which wraps both hours and minutes.

Edit: I realized the problem is with the local settings of the machine the browser runs on, and after changing the settings on my colleagues' laptops it works fine. I am wondering if there is a way to force all browsers to show time in same format, no matter of the machine's settings. I use those fields in several places, so I would preferably stick to them and not using different HTML components (because I don't want to make too many changes in my code). Another problem I noticed is that the input time field is not like a drop-down list in Mozilla (and in Chrome it is drop-down like).

Shortly, the question now would be: How can I use input time fields and force them to show time in same format in all browsers, no matter on the time settings of the machine they are running on.

Thank you!

Answer 1

It is not related to the browser, but to the system settings.

input type="time" displays the time depending on the regional settings that are defined on the system.

The same applies to dates.

How can I use input time fields and force them to show time in same format in all browsers, no matter on the time settings

There are plenty of different solutions. The most used is a input type="text". There are also JQuery plugins that can handle that. A js library widly used is moment.js