chakra-dayzed-datepicker
chakra-dayzed-datepicker copied to clipboard
Chakra UI + Dayzed = datepicker
A Simple Chakra Datepicker based on Dayzed.
Every individual component is using Chakra UI. So it should respect all Chakra UI Configs without problem.
The componenent itself has to use some date
library
Highly recommend just copy/paste the source code from /src
to customize however you want.
Install the dependency
npm i date-fns dayzed
npm i chakra-dayzed-datepicker
Basic usage
Single
const [date, setDate] = useState(new Date());
<SingleDatepicker
name="date-input"
date={date}
onDateChange={setDate}
/>
Range:
Note that this list will have one value during the selection process. Your system won't work if you try to control this directly as [startDate, endDate]
because we'll try to set selectedDates
to [intermediateSelection]
and the length of the resulting selectedDates
is meaningful to the datepicker.
const [selectedDates, setSelectedDates] = useState<Date[]>([new Date(), new Date()]);
<RangeDatepicker
selectedDates={selectedDates}
onDateChange={setSelectedDates}
/>
propsConfigs:
dateNavBtnProps
extends from ButtonProps
of Chakra-UI
This allows you to override the default behavior however your want as long as supported by Chakra-UI.
dayOfMonthBtnProps = {
defaultBtnProps,
isInRangeBtnProp,
selectedBtnProps,
todayBtnProps
}
dayOfMonthBtnProps
allows you to customzie date btn style based on the state.
Style precedence: default
< isInRange
< seleted
< today
.
Example:
propsConfigs={{
dateNavBtnProps: {
colorScheme: "blue",
variant: "outline"
},
dayOfMonthBtnProps: {
defaultBtnProps: {
borderColor: "red.300",
_hover: {
background: 'blue.400',
}
},
isInRangeBtnProps: {
color: "yellow",
},
selectedBtnProps: {
background: "blue.200",
color: "green",
},
todayBtnProps: {
background: "teal.400",
}
},
inputProps: {
size: "sm"
}
}}
other props:
Name | Type | Default value | Description |
---|---|---|---|
name | string | undefined | name attribute for <input /> element |
usePortal | boolean | undefined | to prevent parent styles from clipping or hiding content |
defaultIsOpen | boolean | undefined | open the date panel at the beginning |
minDate | Date | undefined | minimum date |
maxDate | Date | undefined | maximum date |
For version < [email protected]
:
dayOfMonthBtnProps
extends from ButtonProps
and has only selectedBg
support,
dayOfMonthBtnProps: {
borderColor: "red.300",
selectedBg: "blue.200",
_hover: {
bg: 'blue.400',
}
},