Time entry – single digit hour or minute without being required to enter 0 first

[tmcneillParticipant]

I’m trying to make a time entry field where a single digit hour or minute can be entered without typing a 0 first.

Here’s an example of the kind of behavior I’m looking for.

Here’s what I’m working with so far:
<div id='time_widget'></div>

$('#time_widget').jqxDateTimeInput({
  formatString: 'hh:mm tt',
  showTimeButton: false,
  showCalendarButton: false,
  value: null,
})

If I want to enter the time “08:24 PM”, here are the keystrokes required:

0 - 8 - 2 - 4 - P

I would like to be able to enter that same time without the initial 0 required, like this:

8 - Tab - 2 - 4 - Tab - P

The issue isn’t so much with the number of keystrokes required (since the preferred example actually requires an additional keystroke). It’s instead that many of our users will expect to be able to enter the 8 first. This has to do with how people read numbers. For example, 08:24 PM is generally read, “eight twenty-four pea em,” not, “oh eight twenty-four pea em,” or, “zero eight twenty-four pea em.”

Attempting to enter a single digit hour without first typing the preceding 0 with the current widget configuration results in a somewhat frustrating experience. The time right now is 9:54 AM. If I click on my time widget and press the 8 key, the field shows “89:54 AM”. If I press Tab to input minutes, the input then changes to “12:54 AM”. Sure, changing the value to the closest valid value (12 in this case) doesn’t allow for an invalid date, but my intention to have the hour set to 8 was completely ignored. The only 2 ways to properly set the hour value to “08” is either Tab - Shift/Tab - 0 - 8 or anynumber - 0 - 8. With the second solution, there’s no indication that the cursor has moved from the second character in the hour input back to the first. I only figured out that behavior by fiddling around with it for a couple minutes. It’s not very intuitive. I suppose I could set enableAbsoluteSelection to true so the user has a cursor indicating which character they are editing. But tabbing between hours/minutes/am-pm doesn’t seem to work with the enableAbsoluteSelection option. So if I just need to edit the minutes or am-pm, it requires clicking on that field or entering the entire time string again. It improves clarity, but both options slow down data entry speed and reduce accuracy.

So is there some kind of option for a time entry widget that will place the first number entered as the second character and ignore the second number entered unless the two together would be within the valid range for that section (01-12 / 00-23 for hours or 00-59 for minutes)? I’m thinking a solution will possibly involve something with a specific formatString, culture value, or writing my own custom behavior with the valueChanged event.

Thanks for any help solving this.

[HristoParticipant]

Hello tmcneill,

Thank you for the interest to our widget.
Unfortunately we do not have such property that give you a solution.
You could try to create some workaround.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts