Select Date

[jacojoubert]

Examples

http://emberui.com/documentation/selectdate
http://www.eyecon.ro/bootstrap-datepicker/

This component uses popup to show a calendar widget which the user can use to pick a day or date range. The calendar should be a separate component usable outside select-date.

Proposed API

{{#ui-select-date selection=selection placeholder="Select a date" as |select|}}
  {{#select.button}}
    {{format-date select.date format="MMM D, YYYY"}}
  {{/select.button}}
{{/ui-select-date}}

{{#ui-select-date selection=selection placeholder="Select a date" as |select|}}
  {{#select.input value=(format-date select.date format="MMM D, YYYY")}}
{{/ui-select-date}}

The user can choose if they want a button, editable input, or something custom for their trigger. Additional options can also be passed in to restrict or modify how the selection works:

• allowRange Allows user to select multiple days.
• disableBefore User can't select dates before this date. Pass in 'today' to use current date.
• disableAfter User can't select dates after this date. Pass in 'today' to use current date.
• disabledDates Array of dates user is not allowed to select.

ui-select-date states

• active (both when user clicks on it, and when the date picker is open)
• focus
• disabled

Notes

• Should know if it is being shown on a mobile screen so the UI can adjust for a mobile experience.
• Should show two months at once if possible to fit on screen.
• Should allow user to quickly jump between years.
• All dates should be moment date objects.

Questions

• How should we let the user pick a different kind on the calendar and popup? For the button or input they can specify a kind since they are yielded components. Should we also yield a popup component?