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

6
  • 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. Commented Oct 30, 2017 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
    Commented Oct 30, 2017 at 14:24
  • 2
    Maybe I'm being dumb, but how do you know if someone means 01/11/2017 or 11/01/2017? Commented Oct 30, 2017 at 15:22
  • I just thinking... how many users are still typing a date? I myself prefer to use date-picker.
    – Ada
    Commented Jan 28, 2018 at 18:21
  • 1
    @Wanda - I suppose, based on the format in the first step...
    – Jaroslav M
    Commented Aug 27, 2018 at 7:48

1 Answer 1

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.

5
  • 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
    Commented Oct 30, 2017 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
    Commented Oct 30, 2017 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
    Commented Oct 31, 2017 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
    Commented Oct 31, 2017 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
    Commented Aug 27, 2018 at 7:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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