# Date Picker Date Picker component allows users to select a single date or a range of dates using a calendar interface. It ensures accurate and consistent date selection across workflows. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-date-picker--introduction ## Variants documented in Storybook - Single Date Picker: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-date-picker--single-date-picker - Date Range Picker: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-date-picker--date-range-picker - Time Picker: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-date-picker--time-picker ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Date Picker. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Date Range Picker — Date Range Picker HTML: ```html
calendar_today
−
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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
``` React: ```jsx import React from 'react'; const DatePickerExample1Demo = () => ( <> {/* Variant: Date Range Picker */}
calendar_today
−
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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
); export default DatePickerExample1Demo; ``` Angular: ```html
calendar_today
−
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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
``` ### 2. Introduction — Introduction HTML: ```html
Components

Date Picker

Date Picker component allows users to select a single date or a range of dates using a calendar interface. It ensures accurate and consistent date selection across workflows.

Implementation Showcase

Visual demonstration of Date Picker variations.

Single Date Picker

calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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

Date Range Picker

calendar_today
−
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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

Time Picker

schedule
AM
PM

CSS Class Reference

Quickly copy layout and utility classes for Date Pickers.

Structural Classes

Date Picker Container ux4g-date-picker-container
Date Range Container ux4g-date-range-picker
Dropdown Menu ux4g-date-picker-dropdown
Calendar Grid Container ux4g-date-picker-calendar
Time Picker Container ux4g-time-picker-container

State & Day Utilities

Muted Day (Out of Month) is-muted
Current Day Highlight is-today
Range Selection Start is-range-start
Within Selection Range is-in-range
Range Selection End is-range-end
``` React: ```jsx import React from 'react'; const DatePickerExample2Demo = () => ( <>
Components

Date Picker

Date Picker component allows users to select a single date or a range of dates using a calendar interface. It ensures accurate and consistent date selection across workflows.

Implementation Showcase

Visual demonstration of Date Picker variations.

Single Date Picker

calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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

Date Range Picker

calendar_today
−
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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

Time Picker

schedule
AM
PM

CSS Class Reference

Quickly copy layout and utility classes for Date Pickers.

{/* Structural Classes */}

Structural Classes

Date Picker Container ux4g-date-picker-container
Date Range Container ux4g-date-range-picker
Dropdown Menu ux4g-date-picker-dropdown
Calendar Grid Container ux4g-date-picker-calendar
Time Picker Container ux4g-time-picker-container
{/* Variant Utilities */}

State & Day Utilities

Muted Day (Out of Month) is-muted
Current Day Highlight is-today
Range Selection Start is-range-start
Within Selection Range is-in-range
Range Selection End is-range-end
); export default DatePickerExample2Demo; ``` Angular: ```html
Components

Date Picker

Date Picker component allows users to select a single date or a range of dates using a calendar interface. It ensures accurate and consistent date selection across workflows.

Implementation Showcase

Visual demonstration of Date Picker variations.

Single Date Picker

calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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

Date Range Picker

calendar_today
−
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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

Time Picker

schedule
AM
PM

CSS Class Reference

Quickly copy layout and utility classes for Date Pickers.

Structural Classes

Date Picker Container ux4g-date-picker-container
Date Range Container ux4g-date-range-picker
Dropdown Menu ux4g-date-picker-dropdown
Calendar Grid Container ux4g-date-picker-calendar
Time Picker Container ux4g-time-picker-container

State & Day Utilities

Muted Day (Out of Month) is-muted
Current Day Highlight is-today
Range Selection Start is-range-start
Within Selection Range is-in-range
Range Selection End is-range-end
``` ### 3. Single Date Picker — Single Date Picker HTML: ```html
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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
``` React: ```jsx import React from 'react'; const DatePickerExample3Demo = () => ( <> {/* Variant: Single Date Picker */}
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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
); export default DatePickerExample3Demo; ``` Angular: ```html
calendar_today
April 2026 keyboard_arrow_down
Mo
Tu
We
Th
Fr
Sa
Su
29
30
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. Time Picker — Time Picker HTML: ```html
schedule
AM
PM
``` React: ```jsx import React from 'react'; const DatePickerExample4Demo = () => ( <> {/* Variant: Time Picker */}
schedule
AM
PM
); export default DatePickerExample4Demo; ``` Angular: ```html
schedule
AM
PM
``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.