Overview

The Date/Time Input controls provide a set of options for inputing a date, date range, and/or a time. Also included is a solution for creating a recurrence pattern.

Usage

Typically placed within the Content Region of a page or as part of a series of input controls in a form, eg. when scheduling a range of time for a report or duration of employment.

Types

• Inputs - A text input with a mask:
  • Date Input
  • Time Input
• Pickers - A drop menu, attached to an input field, that provides a calendar for making selections. Input pickers utilize a dropdown menu container and therefore follow its placement and layout rules. There are four Input Pickers:
  • Date Picker
  • Time Picker
  • Date & Time Picker
  • Date Range Picker
• Date Range Selection - A select box that provides a menu for selecting from a predefined set of choices. Used in place of an Input Field or Input Picker. Often has a Custom option at bottom of menu that leads to a date picker in a dialog.
• Recurrence Rules Dialog - A modal dialog used in conjunction with either an Input Field or an Input Picker.

Inputs

Date Input / Time Input

Use when a Picker is not appropriate or necessary. Date Input is composed of a Text Box, and Input Mask, and may optionally include Form Item Layout elements (eg. label, hint text, assistance text).

Pickers

Date Picker

Provides a calendar when mouse input is preferred or seeing dates and in context will help the task, Full keyboard functionality is also included.

Time Picker

Provides a picker that allows for indicating times that are not pickable. Full keyboard functionality is included.

Date & Time Picker

Use to pick date and time simultaneously. The date and time values are in separate input fields. The picker, accessed via a single icon to the right, includes both date and time selection controls.

Date Range Picker

Use when a range of dates must be specified, such as the beginning and end date for a report.

Date Range Selector

Use when a general range of time is needed instead of specific start/stop dates. The Custom Range option (From...) leads to a dialog to allow for selection of specific dates if needed.

Date-Time Recurrence Dialog

Use when an event needs to be scheduled to reoccur at pre-set times and intervals. Common uses include scheduling tasks in calendars and generating reports.

---

Specifications & Live Code