1
0 Comments

Spent 2 whole days to build a keyboard-optimized field

Let me first show the field:

Some context: this is for a progress tracking app I am building for myself, and other indie makers (https://logvana.com). I am really focusing on being able to navigate and use the app with just a keyboard. You can enter a date & time in two parts of the app: 1) when setting the date & time for a daily check-in, and 2) when setting a due date and optional time for a single todo item.

I originally started by using native date-time fields (input fields with type=date and type=time). The problem with these fields is that they are inconsistent in how browsers implement them, and their overall keyboard-friendliness. I wanted something that consistently felt great when using with a keyboard.

The things that were really important to me, and that are thankfully working the way I want them to:

  • When you enter digits, the existing digits don't push into the adjacent component of the date or time. This is a common problem with using regular HTML text inputs for date & time entry.
  • You can easily navigate between date and time using Tab, or by pressing Enter when in the date part (Enter accepts the current value so when you accept the current date, you start editing the time part)
  • You can accept the date and time using Enter
  • You can Ctrl + A to select all of the date part or all of the time part and press Backspace or Del to clear the date or time part

It was a lot of time to spend on a simple date and time field but I wanted to get this just right. A part of this was work around the plumbing to allow due dates and check-in times to be triggered with the keyboard.

I would love to hear thoughts, even if it's just based on the animated gif in the embedded tweet above (even better if you happen to give the datetime editor a spin for yourself at https://logvana.com).

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 47 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 27 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments How I Launched FrontendEase 13 comments