Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aliakbarazizi/headless-datepicker
Headless datepicker for React
https://github.com/aliakbarazizi/headless-datepicker
datepicker jalali react timepicker typescript
Last synced: 3 months ago
JSON representation
Headless datepicker for React
- Host: GitHub
- URL: https://github.com/aliakbarazizi/headless-datepicker
- Owner: aliakbarazizi
- License: mit
- Created: 2023-06-07T12:27:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-03T08:10:39.000Z (7 months ago)
- Last Synced: 2024-07-20T09:51:56.150Z (4 months ago)
- Topics: datepicker, jalali, react, timepicker, typescript
- Language: TypeScript
- Homepage: https://aliakbarazizi.github.io/headless-datepicker/
- Size: 1.69 MB
- Stars: 49
- Watchers: 2
- Forks: 6
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-headless-components - Headless Date Picker - Headless datepicker for React (Libraries)
README
# React Date Picker
[](https://badge.fury.io/js/headless-datetimepicker)
[](https://www.npmjs.com/package/headless-datetimepicker)
The Headless Datepicker is a powerful and flexible tool designed for ReactJS applications.
It allows developers to create customizable and visually appealing datepickers with ease.
Unlike traditional datepickers, this component is "headless," meaning it provides the core functionality
and logic while allowing developers to design their own user interface.
## Features
- **Datepicker, Hourpicker, and Calendar Modes:**
The component supports multiple modes, including datepicker, hourpicker, and calendar modes, allowing users to select dates, hours, or navigate through a full calendar.
- **Headless Design:**
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.
- **Multi Picker Support:**
The component allows for nesting multiple pickers within each other, enabling advanced and complex selection scenarios.
- **Keyboard Navigation:**
Users can easily navigate and interact with the datepicker using keyboard shortcuts, enhancing accessibility and improving the user experience.
- **Written in TypeScript with Type Support:**
The component is written in TypeScript, providing strong typing and enabling developers to benefit from type-checking during development.
- **Support for other Calendar Types with Config:**
The component provides support for other calendar types through configuration options. Developers can customize the calendar type based on their requirements.
- **Built-in Config for Jalali Calendar:**
The component comes with a built-in configuration for the Jalali calendar, making it easy to implement and use the Jalali calendar system.
## Installation
The package can be installed via [npm](https://github.com/npm/cli):
```
npm install headless-datetimepicker --save
```
Or via [yarn](https://github.com/yarnpkg/yarn):
```
yarn add headless-datetimepicker
```
## Usage
Import Datepicker component
```js
import { Datepicker } from 'headless-datetimepicker';
```
## Basic example
```jsx
{({ monthName, hour, minute, year }) => (
<>
Prev
Next
{({ items }) =>
items.map((item) => (
{item.text}
))
}
>
)}
```
## Using other calendar types (e.g., Jalali) with Headless Datepicker
The 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:
### Configuration Object
Manually create a configuration object for your desired calendar type or use the internal Jalali configuration provided by the library.
- For the Jalali calendar:
```js
import { config } from 'headless-datetimepicker/jalali';
```
- For custom calendar:
create a config object base on [config](https://github.com/aliakbarazizi/headless-datepicker/blob/main/src/utils/config.ts)
### Pass Configuration to Datepicker
Use the config prop to pass your configuration to the Datepicker component.
```jsx
...
```
**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.**
## Documentation
Please see the [https://aliakbarazizi.github.io/headless-datepicker/](https://aliakbarazizi.github.io/headless-datepicker/)
## License
Licensed under MIT license, see [LICENSE](LICENSE) for the full license.