# react-native-ethiopian-calendar-date-picker

> A react native calendar component which is mainly intended for applications which require Ethiopian calendar.

Latest version **0.0.3** (published 2025-02-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-ethiopian-calendar-date-picker
pnpm add react-native-ethiopian-calendar-date-picker
yarn add react-native-ethiopian-calendar-date-picker
bun add react-native-ethiopian-calendar-date-picker
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2025-02-12 |
| First published | 2025-02-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 520.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Yonas Getahun Chekol |
| Maintainers | yonas-getahun |
| Keywords | react-native, ios, android, ethiopia, react-native-ethiopian-calendar, ethiopian-calendar, react-native-ethiopian-calendar-date-picker, react-native-ethiopian-date-picker, react-native-ethiopian-datepicker, calendar, ui-component |

## Links

- npm: https://www.npmjs.com/package/react-native-ethiopian-calendar-date-picker
- Repository: https://github.com/yonas-getahun/react-native-ethiopian-calendar
- Homepage: https://github.com/yonas-getahun/react-native-ethiopian-calendar#readme
- Issues: https://github.com/yonas-getahun/react-native-ethiopian-calendar/issues
- npm.io page: https://npm.io/package/react-native-ethiopian-calendar-date-picker

## Alternatives

- [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads
- [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads
- [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads
- [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads
- [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads

## Recent versions

- 0.0.3 (latest) — 2025-02-12
- 0.0.2 — 2025-02-12

## README

# React Native Ethiopian Calendar

A react native calendar component which is mainly intended for applications which require Ethiopian calendar.

## Features

- Ethiopian/Gregorian mode toggle
- Supports multiple local languages
- Supports month and year selection
- Supports minimum date selection
- Easy to customize
- Zero dependency
- Fully typed with typescript

## Newly Added Features

- Month and year picker Modal
- min and max Date

## Demo

![](https://media.giphy.com/media/FrjD4KFbOvIRR5vyBX/giphy.gif)

## Installation

with yarn

```bash
yarn add react-native-ethiopian-calendar
```

Install with npm

```bash
npm i react-native-ethiopian-calendar
```

## Usage/Examples

#### Typescript Example

```javascript
import {
  Calendar,
  LanguageCode,
  Mode,
  SelectedDate,
} from 'react-native-ethiopian-calendar';

function App() {
  const [mode, setMode] = React.useState<Mode>('EC');
  const [locale, setLocale] = React.useState<LanguageCode>('AMH');
  const [selectedDate, setSelectedDate] = React.useState<SelectedDate>();

  const maxDate = {
      year: today.getFullYear() + 18,
      month: today.getMonth() + 1,
      day: today.getDate(),
  }

  const minDate = {
      year: today.getFullYear() - 18,
      month: today.getMonth() + 1,
      day: today.getDate(),
  }

  return (
      <Calendar
        mode={mode}
        onDatePress={(date) => setSelectedDate(date)}
        onModeChange={(selectedMode) => setMode(selectedMode)}
        onLanguageChange={(lang) => setLocale(lang)}
        locale={locale}
        maxDate={maxDate}
        minDate={minDate}
      />
  )
}
```

#### Javascript Example

```javascript
import { Calendar } from 'react-native-ethiopian-calendar';

function App() {
  const [mode, setMode] = React.useState('EC');
  const [locale, setLocale] = React.useState('AMH');
  const [selectedDate, setSelectedDate] = React.useState();

  return (
    <Calendar
      mode={mode}
      onDatePress={(date) => setSelectedDate(date)}
      onModeChange={(selectedMode) => setMode(selectedMode)}
      onLanguageChange={(lang) => setLocale(lang)}
      locale={locale}
      maxDate={maxDate}
      minDate={minDate}
    />
  );
}
```

## API Reference

| Prop                | Type            | Required | Description                                                                      | Default                     |
| :------------------ | :-------------- | :------- | :------------------------------------------------------------------------------- | :-------------------------- |
| `mode`              | `Mode`          | `false`  | a prop to switch b/n Ethiopian calendar and Gregorian calendar                   | `EC`                        |
| `locale`            | `LanguageCode`  | `false`  | to change the language of days names and months names.                           | `AMH for EC and ENG for GC` |
| `theme`             | `Theme`         | `false`  | to override default style                                                        | `{}`                        |
| `hideHeaderButtons` | `boolean`       | `false`  | to hide switch mode & change language dropdowns.                                 | `false`                     |
| `onDatePress`       | `function void` | `true`   | an event handler gets executed when date press event is fired.                   |                             |
| `onModeChange`      | `function void` | `false`  | an event handler gets invoked on mode change.                                    |                             |
| `onLanguageChange`  | `function void` | `false`  | an event handler gets invoked on language change.                                |                             |
| `initialDate`       | `Date`          | `false`  | if this prop is not set, the calendar will start from current month.             | `today`                     |
| `minDate`           | `Date`          | `false`  | to give minimum selectable date and date below the given will not be selectable. |                             |
| `maxDate`           | `Date`          | `false`  | to give maximum selectable date and date above the given will not be selectable. |                             |

## License

[MIT](https://choosealicense.com/licenses/mit/)

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

---
_Source: https://npm.io/package/react-native-ethiopian-calendar-date-picker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._