Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/soapwong703/chakra-datetime-picker
A Chakra implementation of datepicker
https://github.com/soapwong703/chakra-datetime-picker
chakra-ui chakra-ui-react datepicker react
Last synced: 20 days ago
JSON representation
A Chakra implementation of datepicker
- Host: GitHub
- URL: https://github.com/soapwong703/chakra-datetime-picker
- Owner: soapwong703
- Created: 2022-01-13T12:32:11.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-17T09:15:23.000Z (about 2 years ago)
- Last Synced: 2024-10-23T00:17:10.716Z (25 days ago)
- Topics: chakra-ui, chakra-ui-react, datepicker, react
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/chakra-datetime-picker
- Size: 734 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# chakra-datetime-picker
A Datetimepicker Component designed for Chakra-UI
# Installation
```sh
npm i chakra-datetime-picker
# or
yarn add chakra-datetime-picker
```
# Demo
[Storybook](https://main--61f115a923ff7a003af69d6a.chromatic.com)
# Description
This component utilize dayjs to support date and datetime input with Chakra-UI style
# Props
## DatePicker
| Props | Type | Description |
| ---------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| cancelButtonProps | ButtonProps | Props of the cancel button |
| cancelText | string | Text of the cancel button |
| colorScheme | string | Color Scheme of the DatePicker Component |
| currentLangKey | "en" \| "zh" \| "zh_cn" | localization key of dayjs, used to localize dayjs |
| defaultValue | string \| number \| Dayjs | Default Value of the DatePicker |
| disableTimestampAfter | number \| false | Any datetime after this value will be disabled |
| disableTimestampBefore | number \| false | Any datetime before this value will be disabled |
| format | string | formatter of dayjs |
| isDisabled | boolean | Control is DatePicker disabled |
| okButtonProps | ButtonProps | Props of the ok button |
| okText | string | Text of the ok button |
| onCancel | (day: Dayjs) => void | Action when click cancel button |
| onChange | (formattedDay: string, day: Dayjs) => void | Action when select date |
| onOk | (day: Dayjs) => void | Action when click Ok button |
| picker | "anniversary" \| "date" | Type of the DatePicker. "anniversary" type can select month and date only. "date" type can select year, month and date |
| showCancelButton | boolean | Display control of the cancel button |
| showOkButton | boolean | Display control of the ok button |
| showSelectableDays | boolean | Display control of the Selectable days |
| showTimeSelector | boolean | Display control of the Time Selector |
| size | "sm" \| "md" \| "lg | Size of the DatePicker Component |
| selectableDays | { format: string; text: string; timestamp: number \| Dayjs } [] | Presets of dates. Can set display format and text. |
| value | Dayjs \| null | Date Value of the Component |
## DatePickerInput
Includes all props of DatePicker
| Props | Type | Description |
| ----------------------- | ---------------------------------------------- | ----------------------------------------------------- |
| allowClear | boolean | Display control of the clear button |
| datePickerDefaultIsOpen | boolean | Control the DatePicker component is opened by default |
| datePickerIsOpen | boolean | Control the DatePicker component is opened |
| inputProps | InputProps | Props of Chakra Input |
| isInvalid | boolean | Control is DatePickerInput invalid |
| name | string | Name of the DatePickerInput element |
| onBlur | () => void | Action when DatePickerInput out of focus |
| onClear | (formattedValue: string, value: Dayjs) => void | Action when clear button is clicked |
| onFocus | () => void | Action then DatePickerInput in focus |
| placeholder | string | Placeholder of DatePickerInput |
| ref | Ref | Ref forward to DatePickerInput |
| wrapPortal | boolean | Is DatePicker Wrapped by a Portal to document.body |
# v2
A major overhaul of the current DatePicker is planned. The new version will includes updated UI, performance improve, and tidy up the component props.