{"id":15916845,"url":"https://github.com/soapwong703/chakra-datetime-picker","last_synced_at":"2025-03-17T23:32:05.073Z","repository":{"id":57196744,"uuid":"447592230","full_name":"soapwong703/chakra-datetime-picker","owner":"soapwong703","description":"A Chakra implementation of datepicker","archived":false,"fork":false,"pushed_at":"2025-02-18T09:18:28.000Z","size":1158,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-10T18:14:42.175Z","etag":null,"topics":["chakra-ui","chakra-ui-react","datepicker","react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chakra-datetime-picker","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/soapwong703.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-01-13T12:32:11.000Z","updated_at":"2025-02-18T09:18:33.000Z","dependencies_parsed_at":"2025-03-10T18:10:28.444Z","dependency_job_id":"14bff815-c9d7-458e-9f08-45fdb97bbad3","html_url":"https://github.com/soapwong703/chakra-datetime-picker","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soapwong703%2Fchakra-datetime-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soapwong703%2Fchakra-datetime-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soapwong703%2Fchakra-datetime-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/soapwong703%2Fchakra-datetime-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/soapwong703","download_url":"https://codeload.github.com/soapwong703/chakra-datetime-picker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243893405,"owners_count":20364895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra-ui","chakra-ui-react","datepicker","react"],"created_at":"2024-10-06T18:05:23.015Z","updated_at":"2025-03-17T23:32:05.067Z","avatar_url":"https://github.com/soapwong703.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chakra-datetime-picker\r\n\r\nA Datetimepicker Component designed for Chakra-UI\r\n\r\n# Installation\r\n\r\n```sh\r\nnpm i chakra-datetime-picker\r\n\r\n# or\r\n\r\nyarn add chakra-datetime-picker\r\n```\r\n\r\n# Demo\r\n\r\n[Storybook](https://main--61f115a923ff7a003af69d6a.chromatic.com)\r\n\r\n# Description\r\n\r\nThis component utilize dayjs to support date and datetime input with Chakra-UI style\r\n\r\n# Props\r\n\r\n## DatePicker\r\n\r\n| Props                  | Type                                                            | Description                                                                                                            |\r\n| ---------------------- | --------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\r\n| cancelButtonProps      | ButtonProps                                                     | Props of the cancel button                                                                                             |\r\n| cancelText             | string                                                          | Text of the cancel button                                                                                              |\r\n| colorScheme            | string                                                          | Color Scheme of the DatePicker Component                                                                               |\r\n| currentLangKey         | \"en\" \\| \"zh\" \\| \"zh_cn\"                                         | localization key of dayjs, used to localize dayjs                                                                      |\r\n| defaultValue           | string \\| number \\| Dayjs                                       | Default Value of the DatePicker                                                                                        |\r\n| disableTimestampAfter  | number \\| false                                                 | Any datetime after this value will be disabled                                                                         |\r\n| disableTimestampBefore | number \\| false                                                 | Any datetime before this value will be disabled                                                                        |\r\n| format                 | string                                                          | formatter of dayjs                                                                                                     |\r\n| isDisabled             | boolean                                                         | Control is DatePicker disabled                                                                                         |\r\n| okButtonProps          | ButtonProps                                                     | Props of the ok button                                                                                                 |\r\n| okText                 | string                                                          | Text of the ok button                                                                                                  |\r\n| onCancel               | (day: Dayjs) =\u003e void                                            | Action when click cancel button                                                                                        |\r\n| onChange               | (formattedDay: string, day: Dayjs) =\u003e void                      | Action when select date                                                                                                |\r\n| onOk                   | (day: Dayjs) =\u003e void                                            | Action when click Ok button                                                                                            |\r\n| picker                 | \"anniversary\" \\| \"date\"                                         | Type of the DatePicker. \"anniversary\" type can select month and date only. \"date\" type can select year, month and date |\r\n| showCancelButton       | boolean                                                         | Display control of the cancel button                                                                                   |\r\n| showOkButton           | boolean                                                         | Display control of the ok button                                                                                       |\r\n| showSelectableDays     | boolean                                                         | Display control of the Selectable days                                                                                 |\r\n| showTimeSelector       | boolean                                                         | Display control of the Time Selector                                                                                   |\r\n| size                   | \"sm\" \\| \"md\" \\| \"lg                                             | Size of the DatePicker Component                                                                                       |\r\n| selectableDays         | { format: string; text: string; timestamp: number \\| Dayjs } [] | Presets of dates. Can set display format and text.                                                                     |\r\n| value                  | Dayjs \\| string \\| null                                         | Date Value of the Component                                                                                            |\r\n\r\n## DatePickerInput\r\n\r\nIncludes all props of DatePicker\r\n\r\n| Props                   | Type                                           | Description                                           |\r\n| ----------------------- | ---------------------------------------------- | ----------------------------------------------------- |\r\n| allowClear              | boolean                                        | Display control of the clear button                   |\r\n| datePickerDefaultIsOpen | boolean                                        | Control the DatePicker component is opened by default |\r\n| datePickerIsOpen        | boolean                                        | Control the DatePicker component is opened            |\r\n| inputProps              | InputProps                                     | Props of Chakra Input                                 |\r\n| isInvalid               | boolean                                        | Control is DatePickerInput invalid                    |\r\n| name                    | string                                         | Name of the DatePickerInput element                   |\r\n| onBlur                  | () =\u003e void                                     | Action when DatePickerInput out of focus              |\r\n| onClear                 | (formattedValue: string, value: Dayjs) =\u003e void | Action when clear button is clicked                   |\r\n| onFocus                 | () =\u003e void                                     | Action then DatePickerInput in focus                  |\r\n| placeholder             | string                                         | Placeholder of DatePickerInput                        |\r\n| ref                     | Ref\u003cany\u003e                                       | Ref forward to DatePickerInput                        |\r\n| wrapPortal              | boolean                                        | Is DatePicker Wrapped by a Portal to document.body    |\r\n\r\n# v2\r\n\r\nA major overhaul of the current DatePicker is planned. The new version will includes updated UI, performance improve, and tidy up the component props.\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoapwong703%2Fchakra-datetime-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsoapwong703%2Fchakra-datetime-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsoapwong703%2Fchakra-datetime-picker/lists"}