KalabAmssalu/ethio-date-picker

A modern Ethiopian and Gregorian date picker package for React applications with dual-calendar support, Ethiopic localization, and seamless date conversion. # @kalabamssalu/ethio-date-picker React date picker with Ethiopian and Gregorian calendars, optional time selection, range mode, and **modal** or **popover** UI. > The unscoped name `ethio-date-picker` is already registered on npm by another package. Publish and install using the scoped name below. ## Install ```bash npm install @kalabamssalu/ethio-date-picker ``` Import styles once in your app: ```tsx import "@kalabamssalu/ethio-date-picker/styles.css"; ``` Requires **React 18+** and **Tailwind CSS v4** (or include the bundled `styles.css` which ships compiled utilities). ## Quick start ```tsx import { EthioDatePicker } from "@kalabamssalu/ethio-date-picker"; import "@kalabamssalu/ethio-date-picker/styles.css"; export function App() { const [date, setDate] = useState (); return ( ); } ``` ## Global configuration Wrap your app to set defaults for every picker: ```tsx import { EthioDatePickerProvider } from "@kalabamssalu/ethio-date-picker"; {children} ``` ## Per-instance: flat props vs `config` Flat props override `config`, which overrides the provider: ```tsx ``` ## Display mode | Prop | Values | Description | |------|--------|-------------| | `displayMode` | `"popover"` \| `"modal"` | Popover anchored to trigger, or draggable resizable dialog | ### Modal options (`modal`) - `defaultWidth`, `defaultHeight`, `minWidth`, `minHeight` - `showCloseButton`, `className` ### Popover options (`popover`) - `align`, `side`, `sideOffset` - `width` — CSS width value (e.g. `min(96vw, 720px)`) - `showDoneButton`, `doneButtonClassName`, `className` ## Exports - `EthioDatePicker` / `DatePicker` — main component - `EthioDatePickerProvider`, `useEthioDatePickerConfig` - `GregorianCalendarPicker`, `EthiopianCalendarPicker`, `TimePicker` - `ManualGregorianOtpRow` - Ethiopian calendar utilities (`gregorianToEthiopian`, etc.)