diff --git a/README.md b/README.md index f88604e..aa8b936 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,69 @@ # Datenel -Datenel = Date + Panel \ No newline at end of file +**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. + +*A Vue.js-supported version is in development.* + +## 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 React from 'react' +import { WeekPicker } from 'datenel-react' +import './app.scss' + +export default () => { + function onSelect(value) { + alert(`You selected ${value.year}-${value-month}-${value.day}`) + } + + return ( +