@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

npm install @kalabamssalu/ethio-date-picker

Import styles once in your app:

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

import { EthioDatePicker } from "@kalabamssalu/ethio-date-picker";
import "@kalabamssalu/ethio-date-picker/styles.css";

export function App() {
  const [date, setDate] = useState<Date>();

  return (
    <EthioDatePicker
      selectedDate={date}
      onDateChange={setDate}
      displayMode="popover"
    />
  );
}

Global configuration

Wrap your app to set defaults for every picker:

import { EthioDatePickerProvider } from "@kalabamssalu/ethio-date-picker";

<EthioDatePickerProvider
  config={{
    displayMode: "modal",
    calendarType: "both",
    showTime: true,
    timeFormat: "24h",
    modal: { defaultWidth: 800, minWidth: 400 },
    popover: { align: "start", showDoneButton: true },
    classNames: { shell: "rounded-2xl" },
  }}
>
  {children}
</EthioDatePickerProvider>

Per-instance: flat props vs config

Flat props override config, which overrides the provider:

<EthioDatePicker
  displayMode="modal"
  config={{
    modal: { defaultHeight: 600 },
    popover: { width: "min(95vw, 900px)" },
  }}
  selectedDate={date}
  onDateChange={setDate}
/>

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.)