A Simple Chakra Datepicker based on Dayzed.

 !Downloads


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
``
npm i date-fns dayzed
`
`
npm i chakra-dayzed-datepicker
`

Yarn:
`
yarn add date-fns dayzed
`
`
yarn add chakra-dayzed-datepicker
`

Basic usage

$3

`jsx

import { SingleDatepicker } from "chakra-dayzed-datepicker";

const [date, setDate] = useState(new Date());

name="date-input"
date={date}
onDateChange={setDate}
/>

`

$3

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.
`jsx

import { RangeDatepicker } from "chakra-dayzed-datepicker";

const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);

selectedDates={selectedDates}
onDateChange={setSelectedDates}
/>
`

$3

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.


`ts
dayOfMonthBtnProps = {
defaultBtnProps,
isInRangeBtnProp,
selectedBtnProps,
todayBtnProps
}
`
dayOfMonthBtnProps allows you to customzie date btn style based on the state.

Style precedence: default < isInRange < seleted < today.

popoverCompProps might be useful when you want to setup some simple styles like text color globally
`ts
popoverCompProps = {
popoverContentProps,
popoverBodyProps
}
`
To sum them up:
`js
propsConfigs={{
dateNavBtnProps: {},
dayOfMonthBtnProps: {
defaultBtnProps: {},
isInRangeBtnProps: {},
selectedBtnProps: {},
todayBtnProps: {}
},
inputProps: {},
popoverCompProps: {
popoverContentProps: {},
popoverBodyProps: {}
},
calendarPanelProps: {
wrapperProps: {},
contentProps: {},
headerProps: {},
dividerProps: {},
},
weekdayLabelProps: {},
dateHeadingProps: {}
}}
`


Example:
`js
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"
},
popoverCompProps: {
popoverContentProps: {
background: "gray.700",
color: "white",
},
},
calendarPanelProps: {
wrapperProps: {
borderColor: 'green',
},
contentProps: {
borderWidth: 0,
},
headerProps: {
padding: '5px',
},
dividerProps: {
display: "none",
},
},
weekdayLabelProps: {
fontWeight: 'normal'
},
dateHeadingProps: {
fontWeight: 'semibold'
}
}}
`

$3

Non Chakra-related configurations :
`
configs={{
dateFormat: 'yyyy-MM-dd',
dayNames: 'abcdefg'.split(''), // length of 7
monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
}}
`

$3

Name |single/range | Type | Default value | Description
----------------------|--------------|------------------------|-------------------------|--------------
name |both | string | undefined | name attribute for element
usePortal |both | boolean | undefined | to prevent parent styles from clipping or hiding content
defaultIsOpen |both | boolean | false | open the date panel at the beginning
closeOnSelect |both | boolean | true | close the date panel upon the complete selection
minDate |both | Date | undefined | minimum date
maxDate |both | Date | undefined | maximum date
disabledDates |single | Set | undefined | for single datepicker only, uses startOfDay as comparison, e.g., disabledDates={new Set([startOfDay(new Date()).getTime()}

For version < npm@0.1.6:

dayOfMonthBtnProps extends from ButtonProps and has only selectedBg support,
`ts
dayOfMonthBtnProps: {
borderColor: "red.300",
selectedBg: "blue.200",
_hover: {
bg: 'blue.400',
}
},
``