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.

6 Answers
6

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).

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!
–
PatriciaFeb 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
–
AlexFeb 28 '12 at 23:45

@Alex: I'm flabbergasted that I've never considered that enhancement. Good thinking!
–
Kit GroseFeb 28 '12 at 23:47

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.

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.

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

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.

Could you please explain why this is a good pattern for this situation?
–
dnbrvFeb 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.efremovFeb 23 '12 at 17:41

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.efremovFeb 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!
–
AlexFeb 28 '12 at 23:51

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.
–
NicFeb 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
–
PatriciaFeb 22 '12 at 18:10

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.

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.
–
MB34Feb 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.
–
PatriciaFeb 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.
–
MB34Feb 22 '12 at 20:08