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

July
2025
MON
TUE
WED
THU
FRI
SAT
SUN
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
NameDescriptionDefaultControl
multiple
Shows to calendars instead of one, usually for when using as a range picker
boolean
-
startDate
What is the first date that can be selected
Date
-
limitDate
What is the limit date that can be selected
Date
-
singleDate
Only selects first value, when this is enabled the user cant use it as a range picker, its a single date calendar
boolean
-
first*
Date
-
last
Date
-
visible
shows calendar
boolean
-
isSelecting
Determines which value will be changed next time the user selects a day, if none is provided it will toggle between first and last automatically
"first""last"
-
weekdaysName
Give a custom name to the week's day, used for translating it to other language
string[]
array
monthsName
Give a custom name to the month's names, used for translating it to other language
string[]
array
customStyles
Allows you to customize some css, works better if you import the customStyles type, for better intelisense
CustomStyles
-
onFirstDateSelected*
Callback whenever the first date is selected, in case you wanna do something in between, like setting a state, redux, etc
(first: Date) => void
--
onLastDateSelected*
Callback whenever the last date is selected, in case you wanna do something in between, like setting a state, redux, etc
(last: Date | undefined) => void
--
onSelectionComplete*
Callback whenever the first and last date are both selected, or just first in case you using single calendar, in case you wanna do something in between, like setting a state, redux, etc
() => void
--

Stories

Multple Calendar

July
2025
August
2025
MON
TUE
WED
THU
FRI
SAT
SUN
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
MON
TUE
WED
THU
FRI
SAT
SUN
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

Custom Calendar

Julho
2025
Agosto
2025
SEG
TER
QUA
QUI
SEX
SAB
DOM
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
SEG
TER
QUA
QUI
SEX
SAB
DOM
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