@zenithui/day-picker
Version:
A ZenithUi Time Picker is React component enables users to select a date or date range from calendar.
67 lines (41 loc) • 1.69 kB
Markdown
# @zenithui/day-picker
A ZenithUi Day Picker is a React component that provides a customizable and lightweight calendar interface for selecting dates, built with `date-fns` for efficient date manipulation. It features a clean, modern design with support for navigation, highlighting, and flexible configurations.
## Features
- Select a date from a monthly calendar view.
- Navigate between months.
- Customizable styles using `classNames`.
- Options to hide navigation buttons, weekdays, and outside dates.
- Supports external date formatting and styling.
## Installation
```sh
npm install @zenithui/day-picker
## OR
yarn add @zenithui/day-picker
```
## Usage
```tsx
import React, { useState } from "react";
import { DayPicker } from "@zenithui/day-picker";
const App = () => {
const [selectedDate, setSelectedDate] = useState(new Date());
return (
<div>
<DayPicker selected={selectedDate} onSelect={setSelectedDate} />
</div>
);
};
export default App;
```
## 🎨 Styling
ZenithUi components are designed to be flexible and styled easily. Combine them with your existing CSS or utility-first frameworks like TailwindCSS for full control over the appearance.
## 🤝 Contributing
Contributions are welcome! Please check out our [contributing guide](https://github.com/ChanduBobbili/ZenithUi/blob/main/CONTRIBUTING.md) for more details.
## 🐛 Reporting Issues
Found a bug or have a feature request? [Create an issue](https://github.com/ChanduBobbili/ZenithUi/issues) on GitHub.
## 📄 License
ZenithUi is licensed under the [MIT License](https://github.com/ChanduBobbili/ZenithUi/blob/main/LICENSE.md).
Happy coding! 🚀