{"id":13773299,"url":"https://github.com/aliakbarazizi/headless-datepicker","last_synced_at":"2025-04-04T21:11:46.783Z","repository":{"id":176445058,"uuid":"650606863","full_name":"aliakbarazizi/headless-datepicker","owner":"aliakbarazizi","description":"Headless datepicker for React","archived":false,"fork":false,"pushed_at":"2025-01-13T03:50:12.000Z","size":1798,"stargazers_count":71,"open_issues_count":2,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T20:08:40.618Z","etag":null,"topics":["datepicker","jalali","react","timepicker","typescript"],"latest_commit_sha":null,"homepage":"https://aliakbarazizi.github.io/headless-datepicker/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aliakbarazizi.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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":"2023-06-07T12:27:11.000Z","updated_at":"2025-03-27T07:54:48.000Z","dependencies_parsed_at":"2024-01-02T21:37:10.908Z","dependency_job_id":"63f66eae-2b4f-4dab-9e06-3f94cf2d2f25","html_url":"https://github.com/aliakbarazizi/headless-datepicker","commit_stats":null,"previous_names":["aliakbarazizi/headless-datepicker"],"tags_count":22,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliakbarazizi%2Fheadless-datepicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliakbarazizi%2Fheadless-datepicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliakbarazizi%2Fheadless-datepicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aliakbarazizi%2Fheadless-datepicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aliakbarazizi","download_url":"https://codeload.github.com/aliakbarazizi/headless-datepicker/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249536,"owners_count":20908212,"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":["datepicker","jalali","react","timepicker","typescript"],"created_at":"2024-08-03T17:01:14.037Z","updated_at":"2025-04-04T21:11:46.757Z","avatar_url":"https://github.com/aliakbarazizi.png","language":"TypeScript","funding_links":[],"categories":["Libraries"],"sub_categories":[],"readme":"# React Date Picker\n\n[![npm version](https://badge.fury.io/js/headless-datetimepicker.svg)](https://badge.fury.io/js/headless-datetimepicker)\n[![npm](https://img.shields.io/npm/dm/headless-datetimepicker)](https://www.npmjs.com/package/headless-datetimepicker)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src='https://github.com/aliakbarazizi/headless-datepicker/raw/main/media/screenshot.png'/\u003e\n\u003c/p\u003e\n\nThe Headless Datepicker is a powerful and flexible tool designed for ReactJS applications.\nIt allows developers to create customizable and visually appealing datepickers with ease.\nUnlike traditional datepickers, this component is \"headless,\" meaning it provides the core functionality\nand logic while allowing developers to design their own user interface.\n\n## Features\n\n- **Datepicker, Hourpicker, and Calendar Modes:**\n  The component supports multiple modes, including datepicker, hourpicker, and calendar modes, allowing users to select dates, hours, or navigate through a full calendar.\n\n- **Headless Design:**\n  The component follows a headless architecture, separating the logic from the presentation layer. This enables developers to design and customize the user interface according to their application's specific needs.\n\n- **Multi Picker Support:**\n  The component allows for nesting multiple pickers within each other, enabling advanced and complex selection scenarios.\n\n- **Keyboard Navigation: (TODO)**\n  Users can easily navigate and interact with the datepicker using keyboard shortcuts, enhancing accessibility and improving the user experience.\n\n- **Written in TypeScript with Type Support:**\n  The component is written in TypeScript, providing strong typing and enabling developers to benefit from type-checking during development.\n\n- **Support for other Calendar Types with Config:**\n  The component provides support for other calendar types through configuration options. Developers can customize the calendar type based on their requirements.\n\n- **Built-in Config for Jalali Calendar:**\n  The component comes with a built-in configuration for the Jalali calendar, making it easy to implement and use the Jalali calendar system.\n\n## Installation\n\nThe package can be installed via [npm](https://github.com/npm/cli):\n\n```\nnpm install headless-datetimepicker --save\n```\n\nOr via [yarn](https://github.com/yarnpkg/yarn):\n\n```\nyarn add headless-datetimepicker\n```\n\n## Usage\n\nImport Datepicker component\n\n```js\nimport { Datepicker } from 'headless-datetimepicker';\n```\n\n## Basic example\n\n```jsx\n\u003cDatepicker\u003e\n  \u003cDatepicker.Input /\u003e\n  \u003cDatepicker.Picker defaultType=\"day\"\u003e\n    {({ monthName, hour, minute, year }) =\u003e (\n      \u003c\u003e\n        \u003cDatepicker.Button action=\"prev\"\u003ePrev\u003c/Datepicker.Button\u003e\n        \u003cDatepicker.Button action=\"next\"\u003eNext\u003c/Datepicker.Button\u003e\n        \u003cDatepicker.Items\u003e\n          {({ items }) =\u003e\n            items.map((item) =\u003e (\n              \u003cDatepicker.Item key={item.key} item={item} action=\"close\"\u003e\n                {item.text}\n              \u003c/Datepicker.Item\u003e\n            ))\n          }\n        \u003c/Datepicker.Items\u003e\n      \u003c/\u003e\n    )}\n  \u003c/Datepicker.Picker\u003e\n\u003c/Datepicker\u003e\n```\n\n## Using other calendar types (e.g., Jalali) with Headless Datepicker\n\nThe Headless Datepicker library provides the flexibility to support various calendar types, allowing you to tailor the datepicker based on your specific regional requirements. To use a custom calendar type or the built-in Jalali calendar, follow these simple steps:\n\n### Configuration Object\n\nManually create a configuration object for your desired calendar type or use the internal Jalali configuration provided by the library.\n\n- For the Jalali calendar:\n\n  ```js\n  import { config } from 'headless-datetimepicker/jalali';\n  ```\n\n- For custom calendar:\n\n  create a config object base on [config](https://github.com/aliakbarazizi/headless-datepicker/blob/main/src/utils/config.ts)\n\n### Pass Configuration to Datepicker\n\nUse the config prop to pass your configuration to the Datepicker component.\n\n```jsx\n\u003cDatepicker config={config}\u003e...\u003c/Datepicker\u003e\n```\n\n**The configuration object should remain unchanged during React re-renders to maintain consistent behavior, and it's recommended to declare it outside the component to avoid unnecessary re-creations.**\n\n## Documentation\n\nPlease see the [https://aliakbarazizi.github.io/headless-datepicker/](https://aliakbarazizi.github.io/headless-datepicker/)\n\n## License\n\nLicensed under MIT license, see [LICENSE](LICENSE) for the full license.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliakbarazizi%2Fheadless-datepicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faliakbarazizi%2Fheadless-datepicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faliakbarazizi%2Fheadless-datepicker/lists"}