Live Demo

Anatomy

Img
  1. Date picker
  2. label
  3. Input field
  4. Placeholder
  5. Date picker icon

Variations

Single, date range, month, quick select, date and time ,and time

Default Date Picker

Img

Multi Date Picker

Img

Date and Time Picker

Img

Guidelines

  • When using for a global date entry field, the date should be formatted: DD Mon YYYY.
  • If using localization, then dates can be formatted to the locally used conventions.
  • Do not disable the ability to enter the date via the keyboard directly into the input.
  • If using Quick Selection, provide date presets with common date range selections, such as month, quarter, or today+1.
Copyright© Workhall 2023. All Rights Reserved.