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?

  • 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? – Cristian Negraia Mar 21 '19 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 '19 at 14:07

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.


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:


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.

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.