0

On my website, users can provide a source to a blog post. This source is dated. I'd like my users to provide either,

  • a day (format is dd/mm/yyyy),
  • a month (format is mm/yyyy),
  • a year (format could be -y[yyyy] for BC years to y[yyy] for AD years).

and I'd like it to be in a single input.

How can I find an intuitive way to indicate the various format I accept to my users?

2
  • 1
    Could you please share a little more context for this? Why would a user select either a day or a month or a year in the same input?
    – Chris
    Mar 21, 2019 at 13:41
  • Let's see a mock with some surrounding context, and a clearer description of your use case and constraints.
    – Mike M
    Mar 21, 2019 at 14:07

2 Answers 2

1

I would use a masked input with an entry initialized to a year. The field is then shown as valid even if a day or month are not entered. It lets the user know that they are optional.

[__/__/2019]

If they start entering a day the field becomes invalid (reddish background or border or invalid icon) until they enter a month.

It might be even better to revert the order, with YYYY/MM/DD and put the cursor at the month position. They can correct the year (seeing it become invalid until a full year is entered) or continue entering a month and day.

The BC/AD option is tricky and I think putting the year first is a good solution for this too. It is obviously linked to the year and the + suggests a - is possible:

[+2019/__/__]

You need to handle years with less than 4 digits. To enter year -17 I feel it's natural to type -0017. This it not obvious and you might need to accept -17__ too.

Obviously a hint or help button giving more explanation and examples is always welcome.

2
  • It is easier to understand dates internationally if you follow Iso 8601 format which is YYYY-MM-DD. slashes, dots, comma and backslashes in dates always been confusing for both users and developers since each country have their own date formats.
    – AaA
    Mar 5, 2020 at 3:46
  • Agreed, but in my proposition dashes would be confusing given the minus sign for BC years. Additionally, slashes are part of the mask and don’t need to be typed. An alternative solution would be to have three input fields bound together, with typing enough characters in one moves the focus to the next, but it results in just another type of visual separation.
    – Mart
    Mar 5, 2020 at 7:17
1

I am assuming the below when I write my answer:

  1. User must select a year
  2. User can select a month, but it is not mandatory (Source may not have the information about the 'month')
  3. User can select a date, but it is not mandatory (Source may not have the information about the 'date')

In this case, the simplest approach is to ask the user to select each value separately. For reference check the below image. enter image description here

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.