Basic datepicker
Simple datepicker
Mo
Tu
We
Th
Fr
Sa
Su
26
27
28
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
31
1
2
3
4
5
6
Month: 10.2022
Model:
Datepicker in a popup
Multiple months
October 2022
Mo
Tu
We
Th
Fr
Sa
Su
26
27
28
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
31
November 2022
Mo
Tu
We
Th
Fr
Sa
Su
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
7
8
9
10
11
Range selection
Example of the range selection
October 2022
Mo
Tu
We
Th
Fr
Sa
Su
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
November 2022
Mo
Tu
We
Th
Fr
Sa
Su
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
From: {
"year": 2022,
"month": 10,
"day": 13
} To: {
"year": 2022,
"month": 10,
"day": 23
} Range selection in a popup
From date model: {
"year": 2022,
"month": 10,
"day": 13
}To date model: {
"year": 2022,
"month": 10,
"day": 23
}Range selection
Disabled datepicker
Mo
Tu
We
Th
Fr
Sa
Su
26
27
28
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
31
1
2
3
4
5
6
Custom date adapter and formatter
These datepickers use custom date adapter and formatter. The custom NgbDateAdapter
lets you use your own model i.e. the structure of ngModel.
The custom NgbDateParserFormatter lets you use your own formatter or parser i.e. the date format in input field.
Notice that there are two different services: the NgbDateAdapter and the NgbDateParserFormatter.
Mo
Tu
We
Th
Fr
Sa
Su
26
27
28
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
31
1
2
3
4
5
6
Model:
State: VALID
Model:
State: VALID