Date, Time, and DateTime Components

[mlaursen]

The complexity of this feature is enormous, so I'm going to write up the requirements and expectations to help me figure out how to implement this feature.

Basic Requirements

• support date-fns (v2+)
• support moment.js -- iffy since it's in maintenance mode

This will be handled by using date-io which should help a lot. A side-effect is that all users of react-md that want to use Date, Time, or DateTime components must install one of the libraries above for it to work.

Components

Time

Material Design Specs

The time components should be the least complex.

Format Requirements:

• HH
• HH:mm
• HH:mm:ss
• HH:mm:ss:sss
• hh am
• hh pm
• hh:mm am
• hh:mm pm
• hh:mm:ss am
• hh:mm:ss pm
• hh:mm:ss:sss am
• hh:mm:ss:sss pm
• mm
• mm:ss
• mm:ss:sss
• ss (might be same as mm)
• ss:sss
• sss

Validation/Error States

• required
• invalid (based on format)
• disable/prevent certain times from being selected

TimeField

A TextField implementation using an input mask that allows users to type a time themselves. This is generally useful when the user already knows the time they'd like to input and don't need additional information.

TimeFieldPolyfill -- name TBD

This component should behave the same as an <input type="time" /> and just is an alternative for the TimeField if users like the behavior of the native implementation more than input masks. It might be more accessible than input masks as well, but I honestly have no clue at this time.

This basically requires me to implement the different time parts using the spinbutton role.

I've played with this one a tiny bit and have something like this:

• Demo
• Code

TimeSelect

This is an iffy one, but this component is useful if only certain times are available.

Clock

This component will allow the user to choose a time by looking at a "clock" and either clicking or dragging the hands to the correct time.

This component will need to support somehow showing that times are unavailable, but maybe leave it up to the developer to come up with another way to show that sort of info/error state.

TimeDialog

This implements either the TimeField or TimeFieldPolyfill within a dialog which is mostly for mobile devices. According to the material design specs, it'll allow the user to show/hide the Clock component as needed.

TimePicker

This component allows you to select a time with:

• TimeField or TimeFieldPolyfill
• a button that displays the TimeDialog

TimeRange

Somehow need to combine and validate two TimePicker components.

Date

Material Design Specs

DateField

DateFieldPolyfill - name TBD

YearPicker

WeekPicker

Calendar

• custom first day of week
• disable specific days
• disable weekends
• show/hide days outside of the current month
• min/max dates
• show week number? (more of a locale thing)

DateDialog

DatePicker

DateRange

Date and Time

No Material Design Specs available. Most likely just a combination of the Date and Time components somehow.

DateTimeField

DateTimePolyfill - name TBD

DateTimeDialog

DateTimePicker

DateTimeRange