Angular Hijri/Gregorian Date Picker with RTL/LTR support
npm install ng-mo-date-pickerbash
npm install ng-mo-date-picker
`
Note: moment-hijri will be installed automatically as a peer dependency.
🚀 Quick Start
$3
`typescript
import { Component } from '@angular/core';
import { NgMoDatePicker, DatePickerOutput } from 'ng-mo-date-picker';
@Component({
selector: 'app-root',
imports: [NgMoDatePicker], // Standalone component
template:
})
export class AppComponent {
onDateChange(output: DatePickerOutput | null) {
if (output) {
console.log('Gregorian:', output.gregorianFormatted);
console.log('Hijri:', output.hijriFormatted);
console.log('Month Name:', output.hijriDate.monthName);
}
}
}
`
📚 Usage Examples
$3
`html
`
$3
`html
[placeholder]="'Pick a date'"
/>
`
$3
`html
[locale]="'ar'"
/>
`
$3
`html
/>
/>
`
$3
`typescript
import { FormControl, ReactiveFormsModule } from '@angular/forms';
@Component({
imports: [NgMoDatePicker, ReactiveFormsModule],
template:
Selected: {{ dateControl.value | date }}
})
export class MyComponent {
dateControl = new FormControl(null);
}
`
$3
`html
[locale]="'en'"
/>
`
$3
`html
[calendarClass]="'my-custom-calendar'"
/>
`
`css
.my-custom-input {
border: 2px solid #3b82f6;
border-radius: 8px;
}
.my-custom-calendar {
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
`
🎛️ API Reference
$3
| Input | Type | Default | Description |
|-------|------|---------|-------------|
| calendarType | 'gregorian' \| 'hijri' | 'gregorian' | Initial calendar type to display |
| locale | 'ar' \| 'en' | 'ar' | Language and direction (RTL/LTR) |
| showIcon | boolean | true | Show/hide calendar icon |
| customIcon | string | '📅' | Custom icon (emoji or text) |
| inputClass | string | '' | Additional CSS classes for input |
| calendarClass | string | '' | Additional CSS classes for calendar popup |
| disabled | boolean | false | Disable the datepicker |
| readonly | boolean | false | Make input readonly |
| placeholder | string | Auto (based on locale) | Custom placeholder text |
| name | string | undefined | Input name attribute |
| id | string | undefined | Input id attribute |
| fluid | boolean | false | Make datepicker full width |
$3
| Output | Type | Description |
|--------|------|-------------|
| dateChange | DatePickerOutput \| null | Emits when date is selected or cleared |
| calendarToggle | boolean | Emits when calendar opens/closes |
$3
`typescript
interface DatePickerOutput {
// Gregorian date info
gregorianDate: Date;
gregorianFormatted: string; // "07/01/2026"
// Hijri date info
hijriDate: {
year: number; // 1446
month: number; // 7
monthName: string; // "Rajab" or "رجب"
day: number; // 18
};
hijriFormatted: string; // "18 Rajab 1446 AH"
// Meta info
calendarType: 'gregorian' | 'hijri';
locale: 'ar' | 'en';
}
`
🎨 Styling
The datepicker comes with clean, modern styles out of the box. You can customize it using:
1. CSS Variables (coming in v2.0)
2. Custom Classes: Use inputClass and calendarClass inputs
3. Override Styles: Target .mo-datepicker-wrapper, .mo-calendar, etc.
$3
`css
.mo-calendar {
--primary-color: #10b981;
--hover-color: #059669;
}
.mo-day.selected {
background: var(--primary-color);
}
.mo-day:hover {
background: var(--hover-color);
}
`
🌍 i18n Support
The component automatically handles:
- Month names (Gregorian and Hijri)
- Day names
- UI labels (Today, Clear, etc.)
- Text direction (RTL/LTR)
Switch between languages:
`html
`
🔧 Advanced Usage
$3
`html
/>
`
`typescript
onCalendarToggle(isOpen: boolean) {
console.log('Calendar is now:', isOpen ? 'open' : 'closed');
}
`
$3
`typescript
onDateChange(output: DatePickerOutput | null) {
if (!output) {
console.log('Date cleared');
return;
}
// Use Gregorian
const jsDate = output.gregorianDate;
console.log('Gregorian:', output.gregorianFormatted);
// Use Hijri
console.log('Hijri Year:', output.hijriDate.year);
console.log('Hijri Month:', output.hijriDate.monthName);
console.log('Formatted:', output.hijriFormatted);
}
`
📱 Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
📋 Changelog
See CHANGELOG.md for a detailed release history.
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repo
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature`)