Member Avatar for Blacklister

hey,

I need a 24 hr i.e 00:00 to 23:59 timepicker in javascript.
Precisely, the requirement is such that the database format are 24 hr timestamps. Hence I cant use am or pm time pickers..

Plz help guyzz..

  • 3 Contributors
  • 3 Replies
  • 186 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by Airshow

Dani AI

Generated

Short answer: prefer the native HTML5 time control where possible. Modern browsers expose <input type="time"> (with step, min and max) and give a normalized string like "HH:MM" (seconds appear if step requires them). That value can be submitted directly, stored in a SQL TIME column as "HH:MM:SS", or combined with a date server-side if a full timestamp is required.

A minimal client-side normalization example (keeps values zero-padded and ready for the database):

<input type="time" id="time" name="time" step="60">

<script>
const el = document.getElementById('time');
el.addEventListener('change', () => {
  const v = el.value;           // e.g. "9:5" or "09:05"
  if (!v) return;
  const parts = v.split(':').map(s => s.padStart(2, '0'));
  const hhmm = parts.slice(0,2).join(':'); // "HH:MM"
  const valid = /^([01]\d|2[0-3]):[0-5]\d$/.test(hhmm);
  if (valid) {
    // hhmm is safe to send to server or store in a TIME column
    console.log('normalized time for DB:', hhmm);
  }
});
</script>

Fallback and server notes: for older browsers or very controlled UIs, two <select> elements (hours 00-23, minutes 00-59) are reliable and accessible. If the value represents a time-of-day only, store it as a TIME type. If it represents an instant, combine local date+time on the server and convert to UTC there (client-side toISOString() will convert to UTC and can shift the hour if interpreted incorrectly).

Context to the thread: ’s quick formatter is a useful starting point but needs zero-padding and validation. ’s widget is one ready-made alternative for those wanting a full UI. For maximum consistency across devices, prefer the native input when available and fall back to a simple select-based UI or a tested JS timepicker configured for 24-hour mode.

Recommended Answers

All 3 Replies

Member Avatar for Airshow

I'm not sure what you mean by "timepicker" but maybe you want something like this:

function getDate24(d) {
	try { return d.getHours() + ':' + d.getMinutes(); }
	catch(e) { return false; }
}

which returns a hh:mm string when fed with a javascript Date. If something other than a Date is passed in, then false will be returned, which you can test for and take appropriate alternative action. This approach will prevent generating a javascript error and consequential crash.

Sample call, for current local computer time, would be:

var timeStr24 = getDate24(new Date());

Airshow

Member Avatar for AMA3

Check out the , it can format a date and/or time however you need it.

If you have problems or suggestions, just submit them via the contact page on that website.

Member Avatar for Airshow

Nice link.

Blacklister, please ignore my rubbish above. I now know what you mean by Timepicker. It's obvious when one has one's thinking head on.

Airshow

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.