🌙 React Hijri Date Picker

A lightweight Hijri (Islamic) date picker built with pure React, HTML, and CSS — no dependencies, no Tailwind, no icons.
Easily convert and select dates in the Hijri (Islamic) calendar format while maintaining Gregorian accuracy.

✨ Features

✅ Pure React + CSS (no extra dependencies)

✅ Supports Hijri ⇄ Gregorian conversion

✅ English and Arabic locales

✅ Configurable year range and placeholders

✅ Click-to-open dropdown calendar

✅ Fully typed with TypeScript support

✅ Multiple date formats (YYYY-MM-DD, D MMMM YYYY, DD/MM/YYYY, MM/DD/YYYY)

✅ Min/max date restrictions

✅ Disabled and highlighted dates

✅ Optional manual input with format validation

✅ Gregorian equivalent display

✅ Clearable and Today button options

✅ Custom day renderer support

✅ Callbacks for open/close events

✅ Popup position control (top/bottom/auto)

✅ Full keyboard accessibility

✅ Returns both Hijri string and Gregorian Date object

✅ Light / Dark / Custom themes with customizable colors

📦 Installation

Install via npm or yarn:

 npm install @mk01/react-hijri-date-picker
 or
 yarn add @mk01/react-hijri-date-picker

#Basic usage

import React, { useState } from 'react'
import HijriDatePicker , { type HijriDatePickerProps } from '@mk01/react-hijri-date-picker'

export default function App() {
 const [date1, setDate1] = useState('1446-04-15')

  return (
     <div>
          <h3 style={{ marginBottom: '12px', fontWeight: '600' }}>Basic Usage</h3>
          <HijriDatePicker
            value={date1}
            onChange={(v) => setDate1(v)}
            placeholder="Select date"
          />
          <p style={{ marginTop: '8px', fontSize: '14px', color: '#666' }}>
            Selected: {date1 || 'None'}
          </p>
        </div>
  )

}

#Arabic Locale with Gregorian Display

import React, { useState } from 'react'
import HijriDatePicker from '@mk01/react-hijri-date-picker'

export default function App() {
 const [date2, setDate2] = useState('1446-04-15')

  return (
     <div>
          <h3 style={{ marginBottom: '12px', fontWeight: '600' }}>Arabic Locale with Gregorian Display</h3>
          <HijriDatePicker
            value={date2}
            onChange={(v, g) => {
              setDate2(v)
              console.log('Hijri:', v, 'Gregorian:', g)
            }}
            locale="ar"
            format="D MMMM YYYY"
            showGregorianEquivalent
            placeholder="اختر التاريخ"
          />
        </div>
  )
}

#Dark Theme with Custom Colors

import React, { useState } from 'react'
import HijriDatePicker from '@mk01/react-hijri-date-picker'

export default function App() {
 const [date3, setDate3] = useState('1446-04-15')

  return (
      <div>
          <h3 style={{ marginBottom: '12px', fontWeight: '600' }}>Dark Theme with Custom Colors</h3>
          <HijriDatePicker
            value={date3}
            onChange={setDate3}
            theme="dark"
            customColors={{
              primary: '#10b981',
              selected: '#059669'
            }}
            highlightedDates={['1446-04-10', '1446-04-20']}
            placeholder="Select date"
          />
        </div>
  )
}

#With Restrictions

import React from 'react'
import HijriDatePicker from '@mk01/react-hijri-date-picker'

export default function App() {
  return (
      <div>
          <h3 style={{ marginBottom: '12px', fontWeight: '600' }}>With Restrictions</h3>
          <HijriDatePicker
            onChange={(v) => console.log(v)}
            minDate="1446-04-01"
            maxDate="1446-04-30"
            disabledDates={['1446-04-15', '1446-04-16']}
            placeholder="Only Rabi' al-thani 1446"
          />
        </div>
  )
}

#Manual Input Enabled

import React from 'react'
import HijriDatePicker from '@mk01/react-hijri-date-picker'

export default function App() {
  return (
       <div>
          <h3 style={{ marginBottom: '12px', fontWeight: '600' }}>Manual Input Enabled</h3>
          <HijriDatePicker
            onChange={(v) => console.log(v)}
            allowManualInput
            format="DD/MM/YYYY"
            placeholder="Type or select: DD/MM/YYYY"
          />
        </div>
  )
}

#Disabled State

import React from 'react'
import HijriDatePicker from '@mk01/react-hijri-date-picker'

export default function App() {
  return (
      <div>
          <h3 style={{ marginBottom: '12px', fontWeight: '600' }}>Disabled State</h3>
          <HijriDatePicker
            value="1446-04-25"
            disabled
            placeholder="Disabled picker"
          />
        </div>
  )
}