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 with CLI
The easiest way to get started is using the shadcn CLI. Run the following command to install all components at once:
$ npx shadcn@latest add https://datepicker.temesgen.dev/r/ethiopian-date-picker.json https://datepicker.temesgen.dev/r/ethiopian-date-range-picker.json
Or install components individually:
Date Picker:
$ npx shadcn@latest add https://datepicker.temesgen.dev/r/ethiopian-date-picker.json
Date Range Picker:
$ npx shadcn@latest add https://datepicker.temesgen.dev/r/ethiopian-date-range-picker.json
Calendar only:
$ npx shadcn@latest add https://datepicker.temesgen.dev/r/eth-calendar.json
Date Picker
A date picker component that displays both Ethiopian and Gregorian calendars side by side. Toggle between calendar formats with the ET/GR button.
Loading code...
Date Range Picker
Select date ranges with Ethiopian calendar support. Both start and end dates are displayed in your preferred format.
Loading code...
Manual Installation
If you prefer to set up the components manually or need more control over the installation, follow the steps below.
Install Dependencies
Install react-day-picker version 9.11.0 or later, which includes built-in Ethiopian calendar support.
$ npm install react-day-picker@^9.11.0 date-fns
Setup shadcn/ui
Initialize shadcn/ui and install the Button and Popover components. Visit shadcn/ui documentation for detailed setup instructions.
$ npx shadcn@latest add button popover
Add Date Utils
Copy the Ethiopian date utility file to your lib directory. This contains date conversion and formatting utilities for the Ethiopian calendar.
Loading code...
Setup Calendar
Create the calendar component in your components/ui directory. This component supports both Ethiopian and Gregorian calendars using react-day-picker's built-in ethiopic support.
Loading code...
Add Date Picker
Create a date picker component that displays both Ethiopian and Gregorian calendars side by side.
Loading code...
Add Date Range Picker
Create a date range picker component for selecting date ranges with Ethiopian calendar support.
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.