Beautiful Hijri & Gregorian date picker with extensive customization built with pure HTML, CSS, and React.
npm install @mk01/react-date-picker
bash
npm install @mk01/react-date-picker
`
`bash
yarn add @mk01/react-date-picker
`
`bash
pnpm add @mk01/react-date-picker
`
🚀 Quick Start
`jsx
import React, { useState } from 'react';
import ReactDatePicker from '@mk01/react-date-picker';
function App() {
const [selectedDate, setSelectedDate] = useState(null);
const handleDateChange = (date, hijri, gregorian) => {
setSelectedDate(date);
console.log('Selected Date:', date);
console.log('Hijri Date:', hijri);
console.log('Gregorian Date:', gregorian);
};
return (
value={selectedDate}
onChange={handleDateChange}
placeholder="Select a date"
/>
);
}
export default App;
`
📖 API Reference
$3
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| value | Date \| null | null | The selected date value |
| onChange | (date: Date, hijri: HijriDate, gregorian: Date) => void | - | Callback fired when date is selected |
| defaultCalendar | 'hijri' \| 'gregorian' | 'hijri' | Which calendar to show by default |
| format | string | 'DD-MM-YYYY' | Date format for display (see formats below) |
| placeholder | string | 'Select date' | Input placeholder text |
| locale | 'en' \| 'ar' | 'en' | Language for calendar labels |
| disabled | boolean | false | Disable the date picker |
| showBothCalendars | boolean | false | Show both calendars simultaneously |
| syncCalendars | boolean | true | Sync both calendars when navigating |
| allowCalendarSwitch | boolean | true | Allow switching between calendars |
| theme | 'light' \| 'dark' \| 'gradient' \| 'modern' \| 'minimal' | 'gradient' | Visual theme |
| size | 'sm' \| 'md' \| 'lg' | 'md' | Component size |
| variant | 'default' \| 'outlined' \| 'filled' \| 'borderless' | 'outlined' | Input field style |
| borderRadius | 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' | 'lg' | Border radius style |
| shadow | 'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'lg' | Shadow intensity |
| animation | 'none' \| 'fade' \| 'slide' \| 'scale' \| 'bounce' | 'scale' | Calendar open animation |
| customColors | CustomColors | - | Custom color overrides (see below) |
| showTodayButton | boolean | true | Show "Today" quick select button |
| showClearButton | boolean | true | Show "Clear" button |
| closeOnSelect | boolean | true | Close calendar after selecting date |
| highlightToday | boolean | true | Highlight today's date |
| highlightWeekends | boolean | true | Highlight weekend days |
| firstDayOfWeek | 0 \| 1 | 0 | First day of week (0=Sunday, 1=Monday) |
| minDate | Date | - | Minimum selectable date |
| maxDate | Date | - | Maximum selectable date |
| hijriYearRange | { start: number; end: number } | { start: 1400, end: 1500 } | Hijri year range |
| gregorianYearRange | { start: number; end: number } | { start: 1970, end: 2100 } | Gregorian year range |
| className | string | '' | Additional CSS class |
$3
The following date formats are supported:
- DD/MM/YYYY - 25/12/2024
- MM/DD/YYYY - 12/25/2024
- YYYY-MM-DD - 2024-12-25
- DD-MM-YYYY - 25-12-2024
- D MMMM YYYY - 25 December 2024
- MMMM D, YYYY - December 25, 2024
- D MMM YYYY - 25 Dec 2024
- MMM D, YYYY - Dec 25, 2024
- dddd, D MMMM YYYY - Monday, 25 December 2024
- ddd, D MMM YYYY - Mon, 25 Dec 2024
- DD.MM.YYYY - 25.12.2024
- D/M/YYYY - 25/12/2024
- YYYY/MM/DD - 2024/12/25
$3
`typescript
interface CustomColors {
primary?: string; // Primary color for selected dates
secondary?: string; // Secondary accent color
accent?: string; // Accent color for highlights
background?: string; // Main background color
surface?: string; // Surface/card background
text?: string; // Primary text color
textSecondary?: string; // Secondary text color
border?: string; // Border color
hover?: string; // Hover state color
selected?: string; // Selected date background
disabled?: string; // Disabled state color
todayBg?: string; // Today's date background
todayText?: string; // Today's date text color
}
`
$3
`typescript
interface HijriDate {
year: number; // Hijri year
month: number; // Hijri month (1-12)
day: number; // Hijri day
}
`
💡 Examples
$3
`jsx
import React, { useState } from 'react';
import ReactDatePicker from '@mk01/react-date-picker';
function HijriExample() {
const [date, setDate] = useState(null);
return (
value={date}
onChange={(date, hijri) => {
setDate(date);
console.log(Selected Hijri date: ${hijri.day}/${hijri.month}/${hijri.year});
}}
defaultCalendar="hijri"
locale="ar"
placeholder="اختر التاريخ"
/>
);
}
`
$3
`jsx
value={date}
onChange={setDate}
defaultCalendar="gregorian"
format="MMMM D, YYYY"
placeholder="Select a date"
/>
`
$3
`jsx
value={date}
onChange={setDate}
showBothCalendars={true}
syncCalendars={true}
size="lg"
/>
`
$3
`jsx
value={date}
onChange={setDate}
theme="dark"
borderRadius="xl"
shadow="xl"
animation="slide"
/>
`
$3
`jsx
value={date}
onChange={setDate}
theme="light"
customColors={{
primary: '#FF6B6B',
secondary: '#4ECDC4',
accent: '#FFE66D',
background: '#FFFFFF',
surface: '#F7F7F7',
text: '#2C3E50',
selected: '#FF6B6B',
hover: '#FFE5E5',
}}
/>
`
$3
`jsx
const today = new Date();
const nextMonth = new Date();
nextMonth.setMonth(nextMonth.getMonth() + 1);
value={date}
onChange={setDate}
minDate={today}
maxDate={nextMonth}
highlightToday={true}
/>
`
$3
`jsx
value={date}
onChange={setDate}
theme="minimal"
size="sm"
variant="borderless"
borderRadius="sm"
shadow="none"
/>
`
$3
`jsx
value={date}
onChange={setDate}
theme="gradient"
size="lg"
variant="filled"
borderRadius="full"
shadow="xl"
animation="bounce"
/>
`
$3
`jsx
value={date}
onChange={setDate}
locale="ar"
format="dddd، D MMMM YYYY"
defaultCalendar="hijri"
placeholder="اختر التاريخ"
firstDayOfWeek={1}
/>
`
$3
`jsx
value={date}
onChange={setDate}
showTodayButton={false}
showClearButton={false}
closeOnSelect={true}
/>
`
$3
`jsx
value={date}
onChange={setDate}
defaultCalendar="hijri"
hijriYearRange={{ start: 1440, end: 1460 }}
locale="ar"
/>
`
$3
`jsx
value={date}
onChange={setDate}
highlightWeekends={false}
highlightToday={false}
/>
`
$3
`jsx
value={date}
onChange={setDate}
theme="modern"
firstDayOfWeek={1}
format="DD.MM.YYYY"
/>
`
$3
`jsx
function AdvancedExample() {
const [selectedDate, setSelectedDate] = useState(null);
const handleChange = (date, hijri, gregorian) => {
setSelectedDate(date);
console.log({
gregorianDate: date.toLocaleDateString(),
hijriDate: ${hijri.day}/${hijri.month}/${hijri.year},
timestamp: date.getTime(),
});
};
return (
value={selectedDate}
onChange={handleChange}
defaultCalendar="hijri"
format="dddd, D MMMM YYYY"
placeholder="Select a date"
locale="en"
showBothCalendars={true}
syncCalendars={true}
allowCalendarSwitch={true}
theme="gradient"
size="lg"
variant="outlined"
borderRadius="lg"
shadow="xl"
animation="scale"
customColors={{
primary: '#8B5CF6',
selected: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
todayBg: '#EDE9FE',
todayText: '#6D28D9',
}}
showTodayButton={true}
showClearButton={true}
closeOnSelect={true}
highlightToday={true}
highlightWeekends={true}
firstDayOfWeek={0}
minDate={new Date('2020-01-01')}
maxDate={new Date('2030-12-31')}
hijriYearRange={{ start: 1400, end: 1500 }}
gregorianYearRange={{ start: 1970, end: 2100 }}
className="my-custom-datepicker"
/>
);
}
`
$3
`jsx
function FormExample() {
const [formData, setFormData] = useState({
name: '',
birthDate: null,
});
const handleSubmit = (e) => {
e.preventDefault();
console.log('Form Data:', formData);
};
return (
);
}
`
$3
`jsx
function MultipleDatePickers() {
const [startDate, setStartDate] = useState(null);
const [endDate, setEndDate] = useState(null);
return (
value={startDate}
onChange={setStartDate}
maxDate={endDate || undefined}
placeholder="Select start date"
/>
value={endDate}
onChange={setEndDate}
minDate={startDate || undefined}
placeholder="Select end date"
/>
);
}
`
🎨 Themes
$3
Clean and professional appearance suitable for most applications.
`jsx
`
$3
Perfect for dark mode applications with high contrast.
`jsx
`
$3
Eye-catching gradient colors with modern styling.
`jsx
`
$3
Contemporary design with cyan accents and clean lines.
`jsx
`
$3
Stripped-down black and white design for simplicity.
`jsx
`
🎬 Animations
Choose from 4 different animation styles:
`jsx
// Fade animation
// Slide animation
// Scale animation (default)
// Bounce animation
// No animation
`
📏 Sizes
$3
`jsx
`
$3
`jsx
`
$3
`jsx
`
🎯 Variants
$3
`jsx
`
$3
`jsx
`
$3
`jsx
`
$3
`jsx
`
🌐 Localization
The component fully supports both English and Arabic:
$3
`jsx
locale="en"
placeholder="Select date"
/>
`
$3
`jsx
locale="ar"
placeholder="اختر التاريخ"
/>
`
⌨️ Keyboard Navigation
- Tab: Focus the date picker
- Enter/Space: Open calendar
- Escape: Close calendar
- Arrow Keys: Navigate between dates
- Home: Go to first day of month
- End: Go to last day of month
- Page Up: Previous month
- Page Down: Next month
🔧 TypeScript Support
The package is written in TypeScript and includes full type definitions:
`typescript
import ReactDatePicker, { ReactDatePickerProps, HijriDate } from '@mk01/react-date-picker';
const MyComponent: React.FC = () => {
const [date, setDate] = useState(null);
const handleChange: ReactDatePickerProps['onChange'] = (date, hijri, gregorian) => {
setDate(date);
console.log(hijri.year, hijri.month, hijri.day);
};
return ;
};
`
🎯 Best Practices
1. Always provide an onChange handler to capture the selected date
2. Use appropriate date formats based on your locale
3. Set reasonable date ranges with minDate and maxDate
4. Choose themes that match your app's design
5. Consider mobile users when selecting size and variant
6. Use locale prop to match your application's language
7. Test with different year ranges for Hijri dates
8. Provide clear placeholders to guide users
🐛 Troubleshooting
$3
Make sure you're passing a valid JavaScript Date object to the value prop.
$3
Check if the disabled prop is set to false and there are no conflicting CSS styles.
$3
Ensure you're passing the customColors object with valid CSS color values.
$3
Hijri date calculations are approximations. For precise Islamic dates, consider using a dedicated Islamic calendar library.
$3
Make sure you have @types/react` installed and are using the correct types from the package.