⌘ K
  • Design Principles
  • Design Framework
  • UX Laws
  • Colours
  • Typography
  • Layout Grids
  • Spacing & Radius
  • Shadow & Blur
Product Design Process
Accessibility Guideline
Content Voice
Marketing & Collaterals
  • Accordion
  • App Bar
  • Avatar
  • Badge
  • Button
  • Breadcrumb
  • Bottom Navigation
  • Carousel
  • Cards
  • Checkbox
  • Chip
  • Date Picker
  • Dropdown
  • Dialog
  • Divider
  • Floating Action Button
  • Footer
  • Header
  • Link
  • Loader
  • Menu
  • Pagination
  • Popover
  • Progress Bar
  • Radio Button
  • Search
  • Sidebar
  • Slider
  • Skeleton
  • Statistic
  • Stepper
  • Switch
  • Table
  • Tabs
  • Tag
  • Text Field
  • Timeline
  • Toast Message
  • Tooltip
  • Upload
  • Logos
  • System Icons
  • Visual Icons
  • Illustrations
  • Images
  • Tones
Templates
v 1.0
  • About Helix
  • For Designers
  • For Developers
  • Components
DatePicker

DatePicker

Using pickers, you can display past, present, or future dates. Depending on the type of date (exact, approximate, memorable) you are asking for from the user, you will need to choose the best picker.

Usage

  • Pickers provide options for displaying past, present, or future dates.
  • Choose the appropriate picker based on the type of date needed (exact, approximate, memorable).
  • Date picker offer precise control for specific dates.

Anatomy

Calendar has a container and a drop down window which has the several dates and month year wise which a indication of the states and two CTAs (optional) which are primary and secondary.

States

A date picker includes two views: CTAs and without CTAs.

Date Picker with CTAs

SunMonTueWedThuFriSat
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sept
Oct
Nov
Dec
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030

Date Picker without CTAs

SunMonTueWedThuFriSat
26
27
28
29
30
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
5
6
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sept
Oct
Nov
Dec
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030

Specifications

Structure and spacing measurements for datepicker.

Live Demo

The Datepicker is demonstrated in a live environment in this demo.

Storybook

Gain access to the component library by clicking here. (For developers)

Chip
Dropdown

Helix - HDFC Life 2025