Member Avatar for ilovephp798

hi all, i would like to ask,
if i have a time field in an application form.
i want it in 24 hours format without the (am/pm).
how can i modify my html5 time type below?

<label>Time:-FROM</label><input type="time" name="timefrom">
  • 4 Contributors
  • 4 Replies
  • 10K Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by oriclon

Dani AI

Generated

You cannot force the native HTML5 time picker to display 24-hour UI; its presentation is controlled by the browser and the user’s locale/OS settings. If a strict 24-hour experience is a requirement, provide clear affordances (e.g., label text that says "Time (24-hour)") and consider enhancing the field with validation/normalization or using a custom widget/polyfill for full control of the UI.

Practical tips you can apply now:

  • Constrain the range and granularity with attributes such as min="00:00", max="23:59", and step="60" (minutes only). This guides users and reduces invalid input.
  • Add accessible guidance with aria-describedby that shows an example like "Use HH:MM, e.g., 18:45" for clarity.
  • Normalize user input on blur so free-typed "3:20 pm" becomes "15:20" before submit (useful on browsers that allow typing into the control):
<script>
document.addEventListener('DOMContentLoaded', function () {
  var field = document.querySelector('input[name="timefrom"]');
  if (!field) return;
  field.addEventListener('blur', function () {
    var m = field.value.trim().match(/^(\d{1,2})(?::(\d{2}))?\s*(am|pm)?$/i);
    if (!m) return;
    var h = parseInt(m[1], 10), min = parseInt(m[2] || '0', 10), ap = (m[3] || '').toLowerCase();
    if (ap === 'pm' && h < 12) h += 12;
    if (ap === 'am' && h === 12) h = 0;
    if (h >= 0 && h <= 23 && min >= 0 && min <= 59)
      field.value = (h < 10 ? '0' : '') + h + ':' + (min < 10 ? '0' : '') + min;
  });
});
</script>

For behavior details and browser support, see MDN: input type="time" and the HTML Standard’s definition of the time input state.

Recommended Answers

All 4 Replies

Member Avatar for almostbob

if the users type am pm for the time input, modify the field with javascript, altering 3:20pm to 15:20 onblur,

two select lists, 0-23 0-59, with labels indicating 24 hour time is required

the form handler is ideally parsing the text to a timestamp anyway, so str2time in the form handler

whole range of possibilities

Edited by almostbob
Member Avatar for almostbob

Hey, I actually read the manual.d0a3386f5ecbbc93511837582c199967

wondered why I never had a bleep fill in a form wrong,
/test.php?timefrom=00%3A59
is the tail of the get parameter submitted as 12:59am
the 12 hour ampm selector parses in the user agent to ISO 8601 standard representation

W3C reference problem solved: data will be submitted in 24hour time

That gets an elephant stamp :

Edited by almostbob
commented: Nice one! Nice elephant aha ;P +4
Member Avatar for oriclon

cool

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.