react-native-ethiopian-calendar-date-picker

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

Installation

with yarn

yarn add react-native-ethiopian-calendar

Install with npm

npm i react-native-ethiopian-calendar

Usage/Examples

Typescript Example

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

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

Made with create-react-native-library