1

We are looking to improve our date pickers so that a user can type in single digits for the months and days as well as 2 digits for the year. Overall we are just going to be putting logic in so power users can type in dates at their preference.

I know that the order in which month and day are displayed is different nationally. Therefore I would like to have helper text displayed before the user starts typing. As soon as they type the helper text would disappear. Overall I would like to have the helper text just to inform the user how the date will be formatted in the end.

Is it confusing to show helper text if the user can put 2 digits in for the year and 1 digit for the month / day?

HOW I EXPECT IT TO LOOK/FUNCTION:

enter image description here

  • 1
    I don't think users will get confused about this, it's pretty straightforward that mm and dd have two digits because it can be a number above 9. Confusion starts when you require people to write / or - themselves or don't allow them to do that. – Wanda Oct 30 '17 at 14:02
  • Sorry something else I should have mentioned was that we will also be adding in the / as they are typing as well. So in the weird cases this is how they will format: 1117 = 01/01/2017 11117 = 1/11/2017 1/1/17 = 1/1/2017 112017 = 11/20/2017 – L. Lemmer Oct 30 '17 at 14:24
  • 2
    Maybe I'm being dumb, but how do you know if someone means 01/11/2017 or 11/01/2017? – Wanda Oct 30 '17 at 15:22
  • I just thinking... how many users are still typing a date? I myself prefer to use date-picker. – Ada Jan 28 '18 at 18:21
  • 1
    @Wanda - I suppose, based on the format in the first step... – Jaroslav M Aug 27 '18 at 7:48
1

Since date formatting varies internationally, choose one format to enforce the order, and keep help text visible.

You're talking about helper text, but what you have in your design is placeholder text.

Helper text is persistent, so when the cursor enters, they'll still see the formatting tips. Material design as an example, has it below the input.

enter image description here

What kind of errors are users making with the current datepicker?

Is there a reason to try to save the user one or two keystrokes when you are introducing a discrepancy between input and output? Seems like you're also introducing a bunch of scripting logic to try to get less keystrokes.

In your example, if I don't have persistent helper text, I might start to get confused, as the formatting tip has just disappeared, and I don't know which order the formatting is using:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

As for the slashes /, as @Wanda said, you can just format those as the user tabs out.

  • Sorry something else I should have mentioned was that we will also be adding in the / as they are typing as well. So in the weird cases this is how they will format if they do or don't enter the / : 1117 = 01/01/2017 11117 = 01/11/2017 1/1/17 = 01/01/2017 112017 = 11/20/2017 – L. Lemmer Oct 30 '17 at 14:31
  • Could you do a test where if you keep the placeholder text visible and enforce the format, with one version where you auto add the / as they type, and a second version that adds the / after the user tabs out? That way you can see which is the clearest for them. – Mike M Oct 30 '17 at 14:35
  • This is a good idea! Also for helper text, wherever I put it, would you think it is okay to have it as what the result would be: mm/dd/yyyy. Even though they can type in mm/dd/yy? – L. Lemmer Oct 31 '17 at 16:55
  • 1
    I would keep the format for what you want, but allow a forgiving input. For example, you can show YY but don't punish them for YYYY – Mike M Oct 31 '17 at 17:19
  • @MikeM - agree. Maybe it's a cultural thing (I'm from central Europe), but whenever I think of a date and type/write it, I enter it as YYYY, never as YY. – Jaroslav M Aug 27 '18 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.