Prism Docs

Date Picker

A component for selecting dates.

Basic Usage

Basic date selection with internal calendar.

March 2026
SuMoTuWeThFrSa
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
31
1
2
3
4
5
6
7
8
9
10
11
Selected Date: Mar 25, 2026
<prism-date-picker [(value)]="selectedDate" />

Disabled State

Read-only or disabled date selection.

March 2026
SuMoTuWeThFrSa
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
31
1
2
3
4
5
6
7
8
9
10
11 
<prism-date-picker [disabled]="true" [value]="selectedDate()" />

Custom Placeholder

Set a custom placeholder for the input.

March 2026
SuMoTuWeThFrSa
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
31
1
2
3
4
5
6
7
8
9
10
11 
<prism-date-picker placeholder="Select a special day" />

PrismDatePicker API

NameTypeDefaultDescription
placeholderinput<string>'Select date'Placeholder for the date input.
disabledmodel<boolean>falseWhether the date picker is disabled.
valuemodel<Date | null>nullThe two-way bound selected date.