Calendar Widget

[dylans]

@smhigley commented on Thu Jan 19 2017

Enhancement

Add an accessible calendar widget based on this mock: http://codepen.io/smhigley/pen/wodZbj

Related to #85.

[smhigley]

Adding some specs based on issue #37:

Features:

• Calendar UI with month and year dialog
• Set selected date
• Set range of valid dates (should this be beta1?)
• localized months and weekdays
• Callback fn's: onMonthChange(focusedDate: Date), onYearChange(focusedDate: Date), onDateSelect(date: Date), onDateFocus(date: Date)
• Mouse/keyboard interactions: open/close month and year dialog, back/next month arrows, selecting an individual date, keyboard arrow keys change date focus, space and enter select a date
• Parent widget controls both the focused date and selected date, but not the month/year dialog

Possible features:

• Datepicker is optionally a dialog opened by a button or focusing on an input (or this could be achieved by the parent using a dialog widget)
• Have a (optional?) text input that updates the datepicker UI

[rishson]

Will this widget just be the calendar or also the datepicker form element?
I think of the mock as being a calendar, but a datepicker being a form element with a calendar button that launches a calendar dialog and sets the form field to the selected date - is my terminology wrong?

[smhigley]

I suppose that's what I'm wondering with the 'Possible Features' bullets. If we go that way, I'm wondering how many options we should provide. E.g., should it always be a in dialog, or should there be an option to always have it open? Should we allow people to have only a text input that opens the calendar on focus, or only a button without a text input? A text input would also need to handle different date formats, and probably could use an input mask.

[rishson]

Yep - all of that 😉
I think the calendar should be lauchable from simple links etc so its probably a standalone widget, with datepicker being another widget that combines a input (with i18n and mask) and a button to launch the calendar?

[smhigley]

For what it's worth, React's calendar widget (https://jquense.github.io/react-widgets/docs/#/calendar) seems to not include the text input or dialog. I think I agree that datepicker should be a separate widget that all the bells and whistles. I'm not sure if Calendar vs. Datepicker are adequately descriptive of that distinction, though. Any thoughts on alternative widget names?

[rishson]

Dojo 1 used Calendar and DateTextBox /shrug

[dylans]

fwiw, while the implementations are dated, Dijit's approach for how to think about the abstractions of these problems is pretty good... for example, a dropdown is reused across things ranging from combo box to the dropdown to show a calendar, or a popup is used for showing the calendar floating, etc. The point is there are a few common UI interactions that were originally done multiple ways which later were refactored into mixins so they'd have the same codepath.