https://github.com/aboveyunhai/chakra-dayzed-datepicker
Chakra UI + Dayzed = datepicker
https://github.com/aboveyunhai/chakra-dayzed-datepicker
chakra-ui chakra-ui-react chakraui date datepicker dayzed
Last synced: 6 months ago
JSON representation
Chakra UI + Dayzed = datepicker
- Host: GitHub
- URL: https://github.com/aboveyunhai/chakra-dayzed-datepicker
- Owner: aboveyunhai
- License: mit
- Created: 2021-07-29T21:35:26.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-04-14T01:24:21.000Z (over 1 year ago)
- Last Synced: 2024-04-14T15:54:57.809Z (over 1 year ago)
- Topics: chakra-ui, chakra-ui-react, chakraui, date, datepicker, dayzed
- Language: TypeScript
- Homepage: https://aboveyunhai.github.io/chakra-dayzed-datepicker/
- Size: 1.62 MB
- Stars: 210
- Watchers: 2
- Forks: 43
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# A Simple Chakra Datepicker based on Dayzed.
[](https://badge.fury.io/js/chakra-dayzed-datepicker) 
Every individual component is using Chakra UI. So it should respect all [Chakra UI](https://github.com/chakra-ui/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
### Single
```jsx
import { SingleDatepicker } from "chakra-dayzed-datepicker";
const [date, setDate] = useState(new Date());
```
### 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.
```jsx
import { RangeDatepicker } from "chakra-dayzed-datepicker";
const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);
```
### 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.
```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'
}
}}
```
### configs:
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,
}}
```
### other props:
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',
}
},
```