DateTimePicker

When to use

• Where something happens at a set moment: a scheduled notification, a planned payment, the start of a maintenance window.

When not to use

• When only the day matters: use DatePicker.
• When only the time matters: use TimeField.
• When a range is needed: use DateRangePicker.

Anatomy

1. Legend: the name of the group; a legend in a fieldset.
2. Date: a DatePicker with segments and a calendar button.
3. Time: a TimeField with hour and minute, and optional seconds.
4. Help text and error: under the group, linked to it.

Behaviour

• The value exists once both parts are filled; it is null while either is empty.
• minDate, maxDate and isDateUnavailable limit days only; show a time rule with error.
• On narrow screens the time part moves under the date.
• With name, a hidden input submits the value as YYYY-MM-DDTHH:mm.

Guidelines

• State the time zone in the help text.
• Keep the default part labels unless you need different ones.

Content

• The legend says what the time is for: “Send time”.
• The error says what to do: “Choose a future date and time.”

Related components

• DatePicker: the date only.
• TimeField: the time only.
• DateRangePicker: a date range.