3

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.

  • Just to confirm, are you intending to let users decide whether they want to select the date in year, month/year or dd/mm/yyyy format. Is this correct? – TDsouza Feb 16 '16 at 6:43
  • I would choose the format yyyy format as the default, and then I suggest a checkbox with the label "You want to select also the month?" If selected, then the option for the day appear. What do you think? It is a good solution for your problem? – Madalina Taina Feb 16 '16 at 6:43
  • @TDsouza Yes, you get my emotions right :) – Spidi's Web Feb 16 '16 at 6:47
  • @MadalinaTaina This is the way I think of too. I was thinking for some another approach. This seems to be not user Friendly to me. – Spidi's Web Feb 16 '16 at 6:48
  • 1
    Why do you provide the users to choose, why not give them only 1 option? What is the context? – Kristiyan Lukanov Feb 16 '16 at 13:12
3

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

enter image description here

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

1

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.

1

The usual option is the calendar picker.

mockup

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.

mockup

download bmml source

1

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:

Users can click in the field and enter the date

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.

Or they click on the calendar icon 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.
  • this solution forces them to always select a specific dd/mm/yyyy doesn't it? what if they want to only select a year or a mm/yyyy? – Dave Haigh Feb 16 '16 at 9:48
  • Oh, I see, well optional drop-down lists would probably be the better way to go. I'll edit my answer. – Monomeeth Feb 16 '16 at 12:38

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.