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:
const [selectedDates, setSelectedDates] = useState<Date[]>([new Date(), new Date()]);
<RangeDatepicker
selectedDates={selectedDates}
onDateChange={setSelectedDates}
/>propsConfigs:
dateNavBtnProps and dayOfMonthBtnProps extends from ButtonProps of Chakra-UI
This allows you to override the default behavior however your want as long as supported by Chakra-UI.
Example:
propsConfigs={{
dateNavBtnProps: {
colorScheme: "blue",
variant: "outline"
},
dayOfMonthBtnProps: {
borderColor: "red.300",
selectedBg: "blue.200",
_hover: {
bg: 'blue.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 |