Ethiopian Date Picker
A custom DateLib implementation for react-day-picker that enables Ethiopian calendar functionality. The provided component uses shadcn/ui for styling, but you can use EthiopianDateLib directly with react-day-picker to create your own custom styled components.
Key Features
- Stores dates in Gregorian format internally while displaying in Ethiopian calendar
- Comprehensive date utility functions for Ethiopian calendar operations (conversion, formatting, calculations)
- Fully customizable - use EthiopianDateLib directly with react-day-picker for custom implementations
- Dual calendar view with Ethiopian and Gregorian dates
- Supports both single date and date range selection modes
Install Dependencies
To get started, install react-day-picker version 9.5.0, which provides the core date picker functionality.
Note that the default installation from shadcn/ui might not work with this implementation. Visitreact-day-picker documentation for more details.
$ npm install react-day-picker@9.5.0
Setup shadcn/ui
Initialize shadcn/ui and install the Button and Popover components: Visit shadcn/ui documentation for detailed setup instructions. You'll need these components to build the date picker interface.
$ npx shadcn-ui@latest add button popover
Add Date Utils
Copy the Ethiopian date utility files to your lib directory: These files contain the core date conversion and formatting utilities for Ethiopian calendar, including a custom DateLib implementation for react-day-picker.
Loading code...
Setup Calendar
Create calendar.tsx in your components/ui directory: This component extends shadcn/ui's calendar component and is inspired by shadcn-date-picker.
Loading code...
Add Date Picker
Create a date picker component that allows selecting individual dates with full Ethiopian calendar support. This component integrates the calendar we created earlier with a popover.
Loading code...
Add Date Range Picker
Create a date range picker component that enables users to select start and end dates using the Ethiopian calendar. This component builds on the single date picker and adds range selection.
Loading code...
Contribute
Open Source Project
This project is open source and welcomes contributions from the community. Whether you want to fix a bug, add a feature, or improve documentation, your help is appreciated.