Member Avatar for srdva59

hi,
i have a inputbox that have a hour in this format:

12:00:00 what i want to do is change the hour,secunds,minuts
by pressing only the keys up and down.

i have seen some web forms that do that but i can´t figure out how do that.
any one know something like that?
thanks a lof for your help
:)

  • 2 Contributors
  • 2 Replies
  • 92 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by srdva59

Dani AI

Generated

As wants to change the HH:MM:SS parts with Up/Down, do this in client-side JavaScript (as hinted). The pattern below detects ArrowUp/ArrowDown, figures out which segment the caret is in (hours, minutes or seconds), increments/decrements that segment with wrapping, keeps two-digit formatting, and restores the selection to the same segment so further key presses continue to affect it.

// attach to your input (example: <input id="time" value="12:00:00">)
const input = document.querySelector('#time');

input.addEventListener('keydown', function (e) {
  const key = e.key || (e.which === 38 ? 'ArrowUp' : e.which === 40 ? 'ArrowDown' : null);
  if (key !== 'ArrowUp' && key !== 'ArrowDown') return;
  e.preventDefault();

  const val = this.value || '00:00:00';
  const parts = val.split(':');
  if (parts.length !== 3) return;

  const selStart = this.selectionStart;
  const selEnd = this.selectionEnd;
  const pos = Math.floor((selStart + selEnd) / 2);
  const partIndex = pos <= 2 ? 0 : pos <= 5 ? 1 : 2;

  let n = parseInt(parts[partIndex], 10);
  if (isNaN(n)) n = 0;
  n += (key === 'ArrowUp') ? 1 : -1;

  const limits = [24, 60, 60]; // adjust hours limit to 12 if you want 12-hour wrap
  const limit = limits[partIndex];
  if (n < 0) n = limit - 1;
  if (n >= limit) n = 0;

  parts[partIndex] = String(n).padStart(2, '0');
  this.value = parts.join(':');

  const ranges = [[0,2],[3,5],[6,8]];
  this.setSelectionRange(ranges[partIndex][0], ranges[partIndex][1]);
});

Notes and tips: use keydown (arrow keys do not reliably fire keypress); call preventDefault() to stop page scrolling; adjust limits for a 12-hour clock or inputs without seconds; validate the final value server-side if you process it with PHP. For API details see KeyboardEvent.key and HTMLInputElement.selectionStart.

Recommended Answers

All 2 Replies

Member Avatar for Kieran Y5

Hi,
You have mistaken PHP as a client-side scripting language. PHP is a server-side language, which means it does its stuff before it sends the page off. Well, sort of.

You will need JavaScript to do this. I am not a complete expert at Javascript so I won't attempt to make a script as I will mess it up... ;)

Hope this helps,
Kieran :)

Member Avatar for srdva59

ok, thanks for your help

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.