No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

DatePicker

2025June
SUN
MON
TUE
WED
THU
FRI
SAT
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
12
[!] You must enter at least 4 digits!
NameDescriptionDefaultControl
onChangeInputValue

Must contain the input valid value to handle the on change event.

!!You must add this prop to initialize this calendar component.

string
--
myInputRef

Must contain input reference in order to link this calendar to an input as a DatePicker.

!!You must add this prop to link your component to your input. Otherwise, it will not work.

object
--
valueCustom

Choose your value type:

!If your component is not link to any input it would be useless.

"1" : 01/02/2022 DD/MM/YYYY

"2" : 2022/02/01 YYYY/MM/DD

"3" : 02/01/2022 MM/DD/YYYY

string
"1"
-
mode

Choose a predefined mode.

"neutral"/"red"/"blue"/"green"/"purple"/"yellow"/

string
"neutral"
language

Choose your current language:

"en" / "fr" / "spa" / "por" / "ger" /

string
"en"
areDaysOutOfMonthAllowed
Choose true or false to allow interaction with days of the previous or next month.
bool
false
areSundaysAllowed
Choose true or false to allow interaction with sundays.
bool
true
areSundaysHighlighted
Choose true or false to allow Sundays Highlighted.
bool
false

Stories

Red Mode

2025June
SUN
MON
TUE
WED
THU
FRI
SAT
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
12
[!] You must enter at least 4 digits!

Green Mode

2025June
SUN
MON
TUE
WED
THU
FRI
SAT
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
12
[!] You must enter at least 4 digits!

Purple Mode

2025June
SUN
MON
TUE
WED
THU
FRI
SAT
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
12
[!] You must enter at least 4 digits!

Yellow Mode

2025June
SUN
MON
TUE
WED
THU
FRI
SAT
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
12
[!] You must enter at least 4 digits!

Blue Mode

2025June
SUN
MON
TUE
WED
THU
FRI
SAT
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
12
[!] You must enter at least 4 digits!