Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I've got a few forms on my web app that require a start date, which is always the first of a month. Currently i'm using the jQuery date picker plugin that disables every day of the month except the first.

you can see how they work here: http://jqueryui.com/demos/datepicker/

it's a little bit confusing to our end users to see all the days of the month when they can only pick the first. But it keeps the interface more consistent with other places where dates are picked.

I can see 2 other options for these interfaces.

  1. Using a year and month drop down that have reasonable options for the year, and the 12 months for the months.

  2. Have the date picker, and allow them to pick any date, and just switch it to the first.

  3. Keep it the same as it is now, with all the days except the 1st disabled.

share|improve this question
add comment

6 Answers

up vote 6 down vote accepted

it's a little bit confusing to our end users to see all the days of the month when they can only pick the first. But it keeps the interface more consistent with other places where dates are picked

But your interface is not more consistent; it behaves differently here than everywhere else in your interface. If the behaviour is inconsistent, the only thing that is consistent is the visual design.

I don't believe that justifies the craziness of a UI where up to 30 of the displayed items are disabled. It's also worth noting that the jQuery date picker component you linked to makes selecting a distant date relatively difficult (pretty much forcing the user to type their date in by hand).

I would suggest that your first option is close to the best one, but rather than presenting years in a drop-down menu (which is not generally recommended) you should use a 4-digit text field (ideally input type="number") with a placeholder value set to some reasonable default year (possibly this year). So the final solution would be a drop-down with the 12 months as options, and then a short, four-digit text field shown immediately after it with, e.g., "2012" as placeholder text.

Rather than adding a "Select A Month…" option, I generally prefer to use the current date as the starting selection, which helps the user make relative decisions (e.g. "last month" becomes very easy to select).

share|improve this answer
1  
i like this idea. the places where this would be used would very rarely be a far future or far past date, but you make a good point about that. a logical default date is a great point as well, in some cases the current month would be right, in others last month, but that is a logic problem for me to solve not a ui problem :) thanks for the help! –  Patricia Feb 27 '12 at 14:28
1  
I often add a small enhancement to this kind of month picker - very simple "Previous Month" and "Next Month" buttons on either side of the Dropdown/textbox combo. This is particularly useful for cases when you want to select last month, and it is currently January. Saves having to select December AND type "2011" in the text field –  Alex Feb 28 '12 at 23:45
    
@Alex: I'm flabbergasted that I've never considered that enhancement. Good thinking! –  Kit Grose Feb 28 '12 at 23:47
add comment

enter image description here

Some words for this date-control:

  1. Absence of false associations at interaction with a date control. In other model you can choose any date which will be automatically set as the first date of month. In practice the similar situation will be regarded as an error of a date-control & quite predicted action of the user will be attempt to establish the necessary date anew, for example 5th. The question will be as interaction result: How to make it? Instead of helping the user to achieve the goal faster, just create excessive resistance and as a result stimulate formation of negative to service as a whole.

  2. Still prior to the beginning interaction with a date-control user is notified that the project beginning probably only from the first date of month.

  3. Blocking of not having sense possibilities. (Possibility of date-in-past choice, or date as value)

  4. High speed of interaction. It's only 3 click to set the project beginning in November of 2013, in difference from a standard jQuery date-picket for example.

share|improve this answer
    
Could you please explain why this is a good pattern for this situation? –  dnbrv Feb 23 '12 at 17:05
1  
1. Absence of false associations at interaction with a date control. In other model you can choose any date which will be automatically set as the first date of month. In practice the similar situation will be regarded as an error of a date-control & quite predicted action of the user will be attempt to establish the necessary date anew, for example 5th. The question will be as interaction result: How to make it? Instead of helping the user to achieve the goal faster, just create excessive resistance and as a result stimulate formation of negative to service as a whole. –  denis.efremov Feb 23 '12 at 17:41
    
Add that to the answer. =) –  dnbrv Feb 23 '12 at 17:43
    
2. Still prior to the beginning interaction with a date-control user is notified that the project beginning probably only from the first date of month. 3. Blocking of not having sense possibilities. (Possibility of date-in-past choice, or date as value) 4. High speed of interaction. It's only 3 click to set the project beginning in November of 2013, in difference from a standard jQuery date-picket for example. –  denis.efremov Feb 23 '12 at 17:50
    
This is a really nice looking control - do you happen to know if it has been implemented in JQuery or similar? If not, it could be worth writing a plugin! –  Alex Feb 28 '12 at 23:51
show 1 more comment

You could use a month picker, so the user only chooses the month and the app prepends the day. There are modifications of the jQuery UI datepicker that do that, look for example here on SO.

share|improve this answer
    
I agree, and the UI datepicker might not even be the optimal tool here. It isn't made for this spec (at all). The demo on SO is pretty straightforward, though, and a much better application for this requirement. –  Nic Feb 22 '12 at 16:36
    
while an interesting idea, i'm not sure it falls under keeping it consistent (it's even less like the regular datepicker) or keeping it easy to use. hmmm –  Patricia Feb 22 '12 at 18:10
add comment

My rule of thumb has always been consistency wins all close battles. That being said, disabling all but one day is not very consistent with the rest of the site. But showing the date picker is more consistent than showing a year/month drop down. So I'd say go with the Date Picker. Perhaps even let them pick any day of the month and update it on select.

share|improve this answer
add comment

Take a look at this very fine jQuery Date Range picker: http://www.filamentgroup.com/lab/date_range_picker_using_jquery_ui_16_and_jquery_ui_css_framework/

share|improve this answer
    
BTW, you can set the preset ranges where your users can select, i.e. First of the month. I created a "Within Next month", "Within Next 3 Months" and "Within Next 6 Months" options for my users. –  MB34 Feb 22 '12 at 17:02
    
i don't need a range, i need a month and year! i do use the date range picker in other parts of my project though. It is a good tool, but completely wrong for this interface. –  Patricia Feb 22 '12 at 18:00
    
Not necessarily, you can configure the selection criteria and have it return the same date for both the start and end. I like it because I can customize the criteria that I show to the user for their selection. –  MB34 Feb 22 '12 at 20:08
add comment

If you only want months/years, checkout this particular control: http://project.yctin.com/monthpicker/demo/

share|improve this answer
    
Please explain why that particular control solves the problem. –  dnbrv Feb 23 '12 at 17:44
    
Allows yo to only select Month and/or Year, that is what you wanted, correct? All you have to do is format the result with the first day of the selected month. –  MB34 Feb 23 '12 at 23:11
    
Did you develop it yourself? Have you implemented somewhere? –  dnbrv Feb 23 '12 at 23:26
    
No, I didn't develop it. I found it while looking for a date range selector that I posted in the comment below. –  MB34 Feb 24 '12 at 14:43
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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