Menu Icon

Date Picker

A date picker allows data entry by selecting date. They let users entering date data.

Usage

Format comes with three different types of date pickers to use. They give context of date by day, week or month

Guidance

  • Date Pickers should indicate a placeholder with text explanation.
  • They are resized by using sizing types.

When to use

  • Use Date Pickers for date data input.

Additional info

  • Default value can be set as today.
  • Consider showing time to display time with date.
  • Consider using range to show start and end Date Pickers.

Variations

  • The updatable properties of Date Pickers are placeholder, size, picker type and format.
  • The updatable behaviours of Date Pickers are show time, show today, range and read only.
  • The updatable style features of Date Pickers are margin, padding, size, overflow, typography, background, border, effects and css.
  • The updatable style features of Date Picker Suffix are size, overflow, typography, effects and css.
  • The updatable style features of Date Picker Placeholder are margin, padding, typography and css.
  • The usable dynamic properties of Date Pickers are placeholder, size, picker, format, showTime, showToday, isRange, inputReadOnly, disabled, hidden and style.