Date Selection UX for “Year”,“Month” or “Date” Options on Web

Question

I have to allow user select date range in form of year, Month/year or Day/Month/Year.

I found some plugins which needs to set the format to yyyy or mm/yyyy or dd/mm/yyyy to make this range selections possible.

How should I make this on UI level?

Providing Radio Button with options to select year, month/year and day/month/year does not seems to be a good option to me. Please suggest.

Answer 1

You could start with letting the user select just the year, once done give him an option to select month and then date.

Something like this

I would have made an animated version but really low on time. Basically clicking on the "add month" would do the following three things

1. Create a new input field to the right of the "year" field for "month"
2. Move the buttons to the right
3. Change the "add month" button to "add date"

Ofcourse this would then repeat for date, except for on date the user would finally only have a save button.

The backend can then reformat it to year or month/year or dd/mm/yyyy

Answer 2

The user's home country is a factor in date-related displays. Most people can figure out unfamiliar date formats, but any time away from the task at hand risks a lower opinion.

If you take the time to get the IP country location of the user device on launch of the site or your mobile app, you can offer the country format and offer a user option to switch to another format.

Answer 3

The usual option is the calendar picker.

^{download bmml source – Wireframes created with Balsamiq Mockups}

But for your scenario where you don't necessarily need that level of granularity, I suggest a drop down which requires MM/YYYY but also lets you add DD as well.

^{download bmml source}

Answer 4

I'm assuming you're talking a web page/site? Your question doesn't actually provide any context.

Best practice is to have a date field that users can either enter the date manually or click on a 'calendar' icon to then be presented with a small calendar from which they can select the appropriate date.

I did a quick mockup to show you what I mean:

In the above example users can click in the field and enter the date. Or they click on the calendar icon (see below image) to be able to select the appropriate date. Users can move forward and backward within the calendar to get to the date they need.

Now, if the user needs flexibility in terms of what they're choosing, the usual method is to just use drop down lists for each of the fields. In your scenario you'd have a couple of options:

1. Have all three fields as drop-down lists and ensure the Year field is mandatory. The user can then choose either one or both of the optional Month and Day fields.
2. Present the user with an option first to choose the format they want to enter and then, based on their choice, have the appropriate fields appear with all of them being mandatory.