Gedion-01/et-calendar

A simple feature-rich React library that provides components, hooks, and utilities for working with both the Ethiopian and Gregorian calendars. It facilitates date selection, formatting, and conversion between these two calendars. # Et-Calendar Is the most **feature-rich React library** that provides components, hooks, and utilities for working with both the Ethiopian and Gregorian calendars. It facilitates date selection, formatting, and conversion between these two calendars, making it easy to build applications that require dual calendar support. The components are fully customizable using **Tailwind CSS** or standard **CSS**, allowing you to tailor the look and feel to match your application's design. ( Demo ) ## Features - **DatePicker Component**: Customizable Ethiopian/Gregorian picker with min/max bounds, optional clamped navigation, and close-on-select. - **DateTimePicker Component**: Date + time picker with the same bounds/close-on-select behaviors and 12h/24h time support. - **Custom Hooks**: Hooks for formatting and manipulating dates. - **Utilities**: Functions for Ethiopian date conversions and operations. - **Fully TypeScript Supported**: Includes comprehensive type definitions for better TypeScript integration. ## Installation Install the package via npm: ```bash npm install et-calendar ``` Or via Yarn: ```bash yarn add et-calendar ``` ## Usage ### DatePicker The DatePicker component allows users to select dates using either the Ethiopian or Gregorian calendar, or both. ```tsx import { useState } from "react"; import { EthiopianDate } from "et-calendar/lib"; import { DatePicker } from "et-calendar"; function App() { const [date, setDate] = useState (() => new Date()); const [ethDate, setEthDate] = useState(() => EthiopianDate.toEth(new Date())); const handleDateChange = (newDate: Date) => { setDate(newDate); setEthDate(EthiopianDate.toEth(newDate)); }; return ( ); } export default App; ``` ### DateTimePicker The DateTimePicker component extends the DatePicker by including time selection. ```tsx import { useState } from "react"; import { EthiopianDate } from "et-calendar/lib"; import { DateTimePicker } from "et-calendar"; function App() { const [da …