chakra-datetime-picker

A Datetimepicker Component designed for Chakra-UI

Installation

npm i chakra-datetime-picker

# or

yarn add chakra-datetime-picker

Demo

Storybook

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.