5

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.

Improve this question

6 Answers 6

Reset to default
5

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

Improve this answer
3
  • 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
    Commented Feb 27, 2012 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
    Commented Feb 28, 2012 at 23:45
  • @Alex: I'm flabbergasted that I've never considered that enhancement. Good thinking!
    – Kit Grose
    Commented Feb 28, 2012 at 23:47
8

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.

Improve this answer
6
  • Could you please explain why this is a good pattern for this situation?
    – dnbrv
    Commented Feb 23, 2012 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
    Commented Feb 23, 2012 at 17:41
  • Add that to the answer. =)
    – dnbrv
    Commented Feb 23, 2012 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
    Commented Feb 23, 2012 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
    Commented Feb 28, 2012 at 23:51
1

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.

Improve this answer
2
  • 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
    Commented Feb 22, 2012 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
    Commented Feb 22, 2012 at 18:10
0

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.

Improve this answer
0

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/

Improve this answer
3
  • 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
    Commented Feb 22, 2012 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
    Commented Feb 22, 2012 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
    Commented Feb 22, 2012 at 20:08
0

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

Improve this answer
4
  • Please explain why that particular control solves the problem.
    – dnbrv
    Commented Feb 23, 2012 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
    Commented Feb 23, 2012 at 23:11
  • Did you develop it yourself? Have you implemented somewhere?
    – dnbrv
    Commented Feb 23, 2012 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
    Commented Feb 24, 2012 at 14:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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