https://github.com/astrian/datenel-react
Datenel is a web UI component for selecting dates.
https://github.com/astrian/datenel-react
Last synced: 4 months ago
JSON representation
Datenel is a web UI component for selecting dates.
- Host: GitHub
- URL: https://github.com/astrian/datenel-react
- Owner: Astrian
- License: mit
- Created: 2025-02-20T00:27:22.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-05T14:44:42.000Z (over 1 year ago)
- Last Synced: 2025-10-20T01:31:38.208Z (8 months ago)
- Language: TypeScript
- Homepage: https://datenel.js.org
- Size: 425 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Datenel
**Datenel = Date + Panel**
Datenel is a web UI component for selecting dates. It provides a customizable date picker panel that can be easily integrated into your React applications.
Want to use Datenel in Vue.js 3 application? [We got you](https://www.npmjs.com/package/datenel-vue3).
*Shadow border not included. Battery included.*
## Features
- **Zero runtime dependencies**: Slim size with low to 14.26 kB, also flexible to your favorite time processing library.
- **Customizable Colors**: Easily change the main, accent, reversed, hover, and border colors of the panel.
- **Localization**: Supports localization for different languages.
- **Accessibility**: Includes features for screen readers and keyboard navigation.
- **Programmatic Control**: Control the selected date programmatically and handle date selection events.
- **JSDoc Support**: Full IDE prompt support to help you use Datenel more conveniently.
## Installation
To install Datenel, use npm or yarn:
```sh
npm install datenel-react # Use npm
yarn add datenel-react # Use yarn
```
## Usage
Here is an example of how to use Datenel in your React application:
```tsx
import { SingleDatePicker } from 'datenel-react'
export default () => {
function onSelect(value) {
alert(`You selected ${value.year}-${value-month}-${value.day}`)
}
return
}
```
For more information and live demo, refer to [Datenel’s documentation](https://datenel.js.org/guide/react/gettingstart.html).
## Supported Components & Props
- [x] SingleDatePicker
- [x] SingleWeekPicker
- [ ] MultipleDatePicker
- [ ] DateRangePicker
More features are on the roadmap.
## Contribution & Development
```zsh
npm i # or `yarn`
npm run dev # or `yarn dev`
```
Then the package will launch a testing React hot-reload server on `localhost:1926`. The server file is available in the `playground` folder, feel free to modify the content inside it.
## License
MIT