hijri-date-time-picker 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Hany
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,183 @@
+# Hijri Date Time Picker Component
+
+An Angular standalone component for dual-mode Gregorian and Hijri date selection with time support using the Umm Al-Qura calendar system.
+
+## Features
+
+✨ **Dual Calendar Support**: Switch between Gregorian and Hijri (Umm Al-Qura) calendars  
+🌍 **Localization**: Full support for English and Arabic languages  
+↔️ **RTL/LTR**: Automatic layout direction based on locale  
+📅 **Multiple Selection**: Single or multiple date selection modes  
+🕒 **DateTime Support**: Integrated time selection with modern styling  
+🎨 **Customizable Styling**: Comprehensive theming via CSS variables  
+✅ **Validation**: Future date validation with configurable limits  
+📱 **Responsive**: Mobile-friendly design  
+♿ **Accessible**: ARIA labels and keyboard navigation support
+
+## Installation
+
+```bash
+npm install hijri-date-time-picker hijri-date
+```
+
+## Dependencies
+
+- `@angular/core` >= 15.0.0
+- `@angular/common` >= 15.0.0
+- `hijri-date` ^0.2.2
+
+## Usage
+
+### Basic Example
+
+```typescript
+import { Component } from '@angular/core';
+import { HijriDatePickerComponent, SelectedDate } from 'hijri-date-time-picker';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [HijriDatePickerComponent],
+  template: `
+    <hijri-date-picker
+      [mode]="'greg'"
+      [locale]="'en'"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class AppComponent {
+  onDateSelected(date: SelectedDate) {
+    console.log('Selected date:', date);
+  }
+}
+```
+
+### DateTime Picker Example
+
+```html
+<hijri-date-picker
+  [enableTime]="true"
+  [timeFormat]="'12'"
+  [minuteStep]="15"
+  [enableSeconds]="false"
+  (dateSelected)="onDateTimeSelected($event)">
+</hijri-date-picker>
+```
+
+### Initial Date Binding
+
+```html
+<!-- Single Date Selection -->
+<hijri-date-picker
+  [initialSelectedDate]="myDate">
+</hijri-date-picker>
+
+<!-- Multiple Dates Selection -->
+<hijri-date-picker
+  [multiple]="true"
+  [initialSelectedDates]="myDates">
+</hijri-date-picker>
+```
+
+## API Reference
+
+### Inputs
+
+#### Mode & Configuration
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `canChangeMode` | `boolean` | `true` | Enable/disable mode toggle button |
+| `mode` | `'greg' \| 'hijri'` | `'greg'` | Initial calendar mode |
+| `dir` | `'ltr' \| 'rtl'` | `'ltr'` | Text direction |
+| `locale` | `'en' \| 'ar'` | `'en'` | Language locale |
+
+#### DateTime Configuration (NEW)
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `enableTime` | `boolean` | `false` | Enable time selection UI |
+| `timeFormat` | `'12' \| '24'` | `'24'` | Time display format |
+| `minuteStep` | `number` | `1` | Increment step for minutes |
+| `enableSeconds` | `boolean` | `false` | Show seconds selection |
+| `defaultTime` | `{ hours, minutes, seconds? }` | `undefined` | Default time to show |
+
+#### Validation
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `futureValidation` | `boolean` | `true` | Prevent selecting dates beyond limit |
+| `futureYearsLimit` | `number` | `10` | Maximum years in the future |
+| `isRequired` | `boolean` | `false` | Require date selection before submit |
+
+#### Selection & Binding
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `multiple` | `boolean` | `false` | Enable multiple date selection |
+| `showConfirmButton` | `boolean` | `false` | Show submit button |
+| `initialSelectedDate` | `Date` | `undefined` | Pre-select a single date |
+| `initialSelectedDates` | `Date[]` | `[]` | Pre-select multiple dates |
+
+#### Labels
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `submitTextButton` | `string` | `'Submit'` | Submit button text |
+| `todaysDateText` | `string` | `'Today'` | Today button text |
+| `ummAlQuraDateText` | `string` | `'Umm Al-Qura Calendar'` | Calendar type label |
+| `yearSelectLabel` | `string` | `'Year'` | Year dropdown label |
+| `monthSelectLabel` | `string` | `'Month'` | Month dropdown label |
+
+### Outputs
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `dateSelected` | `EventEmitter<SelectedDate \| SelectedDate[]>` | Emits when date(s) selected |
+| `modeChanged` | `EventEmitter<'greg' \| 'hijri'>` | Emits when calendar mode changes |
+
+### Types
+
+#### SelectedDate
+
+```typescript
+interface SelectedDate {
+  gregorian: Date;
+  hijri: {
+    year: number;
+    month: number;
+    day: number;
+  };
+  time?: {
+    hours: number;
+    minutes: number;
+    seconds: number;
+  };
+  formatted: {
+    gregorian: string;
+    hijri: string;
+    time?: string;
+  };
+}
+```
+
+## Styling
+
+The component can be customized using the `styles` input or by overriding CSS variables:
+
+```typescript
+const customStyles: DatePickerStyles = {
+  primaryColor: '#4f46e5',
+  secondaryColor: '#818cf8',
+  borderRadius: '8px'
+};
+```
+
+## License
+
+MIT
+
+## Credits
+
+Built with [Angular](https://angular.io/) and [hijri-date](https://www.npmjs.com/package/hijri-date).

package/dist/demo.d.ts

@@ -0,0 +1,8 @@
+import { SelectedDate, DatePickerStyles } from './lib/hijri-date-picker.component';
+export declare class DemoComponent {
+    selectedDates: {
+        [key: string]: any;
+    };
+    customStyles: DatePickerStyles;
+    onDateSelected(date: SelectedDate | SelectedDate[], key: string): void;
+}

package/dist/demo.js

@@ -0,0 +1,209 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { HijriDatePickerComponent } from './lib/hijri-date-picker.component';
+let DemoComponent = class DemoComponent {
+    selectedDates = {};
+    customStyles = {
+        primaryColor: '#059669',
+        secondaryColor: '#34d399',
+        selectedDateBackground: '#059669',
+        todayColor: '#f59e0b',
+        borderRadius: '12px',
+        fontFamily: 'Inter, sans-serif'
+    };
+    onDateSelected(date, key) {
+        this.selectedDates[key] = date;
+        console.log(`Date selected for ${key}:`, date);
+    }
+};
+DemoComponent = __decorate([
+    Component({
+        selector: 'app-demo',
+        standalone: true,
+        imports: [HijriDatePickerComponent],
+        template: `
+    <div class="demo-container">
+      <h1>Hijri Date Picker Demo</h1>
+      
+      <div class="demo-grid">
+        <!-- Example 1: Basic Gregorian -->
+        <div class="demo-card">
+          <h2>Basic Gregorian</h2>
+          <hijri-date-picker
+            [mode]="'greg'"
+            [locale]="'en'"
+            [canChangeMode]="true"
+            (dateSelected)="onDateSelected($event, 'basic')">
+          </hijri-date-picker>
+          <div class="output" *ngIf="selectedDates['basic']">
+            <strong>Selected:</strong>
+            <pre>{{ selectedDates['basic'] | json }}</pre>
+          </div>
+        </div>
+
+        <!-- Example 2: Hijri with Arabic -->
+        <div class="demo-card">
+          <h2>Hijri Calendar (Arabic)</h2>
+          <hijri-date-picker
+            [mode]="'hijri'"
+            [locale]="'ar'"
+            [dir]="'rtl'"
+            [canChangeMode]="true"
+            [submitTextButton]="'تأكيد'"
+            [todaysDateText]="'اليوم'"
+            [yearSelectLabel]="'السنة'"
+            [monthSelectLabel]="'الشهر'"
+            (dateSelected)="onDateSelected($event, 'hijri')">
+          </hijri-date-picker>
+          <div class="output" *ngIf="selectedDates['hijri']">
+            <strong>Selected:</strong>
+            <pre>{{ selectedDates['hijri'] | json }}</pre>
+          </div>
+        </div>
+
+        <!-- Example 3: Multiple Selection -->
+        <div class="demo-card">
+          <h2>Multiple Selection</h2>
+          <hijri-date-picker
+            [mode]="'greg'"
+            [locale]="'en'"
+            [multiple]="true"
+            [showConfirmButton]="true"
+            [submitTextButton]="'Confirm Selection'"
+            (dateSelected)="onDateSelected($event, 'multiple')">
+          </hijri-date-picker>
+          <div class="output" *ngIf="selectedDates['multiple']">
+            <strong>Selected Dates:</strong>
+            <pre>{{ selectedDates['multiple'] | json }}</pre>
+          </div>
+        </div>
+
+        <!-- Example 4: Custom Styling -->
+        <div class="demo-card">
+          <h2>Custom Theme</h2>
+          <hijri-date-picker
+            [mode]="'greg'"
+            [locale]="'en'"
+            [styles]="customStyles"
+            [canChangeMode]="true"
+            (dateSelected)="onDateSelected($event, 'custom')">
+          </hijri-date-picker>
+          <div class="output" *ngIf="selectedDates['custom']">
+            <strong>Selected:</strong>
+            <pre>{{ selectedDates['custom'] | json }}</pre>
+          </div>
+        </div>
+
+        <!-- Example 5: Future Date Validation -->
+        <div class="demo-card">
+          <h2>No Future Dates</h2>
+          <hijri-date-picker
+            [mode]="'greg'"
+            [locale]="'en'"
+            [futureValidation]="true"
+            [futureYearsLimit]="0"
+            [todaysDateText]="'Select Today'"
+            (dateSelected)="onDateSelected($event, 'validation')">
+          </hijri-date-picker>
+          <div class="output" *ngIf="selectedDates['validation']">
+            <strong>Selected:</strong>
+            <pre>{{ selectedDates['validation'] | json }}</pre>
+          </div>
+        </div>
+
+        <!-- Example 6: Minimal UI -->
+        <div class="demo-card">
+          <h2>Minimal UI</h2>
+          <hijri-date-picker
+            [mode]="'greg'"
+            [locale]="'en'"
+            [canChangeMode]="false"
+            [todaysDateSection]="false"
+            [disableYearPicker]="true"
+            [disableMonthPicker]="true"
+            (dateSelected)="onDateSelected($event, 'minimal')">
+          </hijri-date-picker>
+          <div class="output" *ngIf="selectedDates['minimal']">
+            <strong>Selected:</strong>
+            <pre>{{ selectedDates['minimal'] | json }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+        styles: [`
+    .demo-container {
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 40px 20px;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+
+    h1 {
+      text-align: center;
+      color: #1f2937;
+      margin-bottom: 40px;
+      font-size: 2.5rem;
+    }
+
+    .demo-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+      gap: 30px;
+    }
+
+    .demo-card {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+
+    .demo-card h2 {
+      margin-top: 0;
+      margin-bottom: 20px;
+      color: #374151;
+      font-size: 1.25rem;
+      border-bottom: 2px solid #e5e7eb;
+      padding-bottom: 10px;
+    }
+
+    .output {
+      margin-top: 20px;
+      padding: 16px;
+      background: #f9fafb;
+      border-radius: 8px;
+      border: 1px solid #e5e7eb;
+    }
+
+    .output strong {
+      display: block;
+      margin-bottom: 8px;
+      color: #374151;
+    }
+
+    .output pre {
+      margin: 0;
+      font-size: 12px;
+      color: #6b7280;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+
+    @media (max-width: 768px) {
+      .demo-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+  `]
+    })
+], DemoComponent);
+export { DemoComponent };
+// Bootstrap the demo application
+bootstrapApplication(DemoComponent);

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { HijriDatePickerComponent } from './lib/hijri-date-picker.component';
+export * from './lib/hijri-date-picker.types';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { HijriDatePickerComponent } from './lib/hijri-date-picker.component';
+export * from './lib/hijri-date-picker.types';

package/dist/lib/hijri-date-picker.component.d.ts

@@ -0,0 +1,86 @@
+import { EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { DateMode, Direction, Locale, SelectedDate, DatePickerStyles, TimeFormat } from './hijri-date-picker.types';
+export declare class HijriDatePickerComponent implements OnInit, OnChanges {
+    canChangeMode: boolean;
+    mode: DateMode;
+    dir: Direction;
+    locale: Locale;
+    futureValidation: boolean;
+    futureYearsLimit: number;
+    isRequired: boolean;
+    multiple: boolean;
+    showConfirmButton: boolean;
+    initialSelectedDate?: Date;
+    initialSelectedDates?: Date[];
+    submitTextButton: string;
+    todaysDateText: string;
+    ummAlQuraDateText: string;
+    yearSelectLabel: string;
+    monthSelectLabel: string;
+    todaysDateSection: boolean;
+    markToday: boolean;
+    disableYearPicker: boolean;
+    disableMonthPicker: boolean;
+    disableDayPicker: boolean;
+    styles: DatePickerStyles;
+    enableTime: boolean;
+    timeFormat: TimeFormat;
+    minuteStep: number;
+    enableSeconds: boolean;
+    defaultTime?: {
+        hours: number;
+        minutes: number;
+        seconds?: number;
+    };
+    dateSelected: EventEmitter<SelectedDate | SelectedDate[]>;
+    modeChanged: EventEmitter<DateMode>;
+    currentYear: number;
+    currentMonth: number;
+    currentHijriYear: number;
+    currentHijriMonth: number;
+    selectedDates: SelectedDate[];
+    calendarDays: any[];
+    today: Date;
+    years: number[];
+    months: string[];
+    weekdays: string[];
+    selectedTime: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+    isPM: boolean;
+    ngOnInit(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    private initializeCalendar;
+    private initializeSelectedDates;
+    private initializeTime;
+    private updateLocaleData;
+    private generateYears;
+    private generateCalendar;
+    private generateGregorianCalendar;
+    private generateHijriCalendar;
+    private getDaysInHijriMonth;
+    private isSameDay;
+    private isDateDisabled;
+    private isDateSelected;
+    onDayClick(dayInfo: any): void;
+    private createSelectedDate;
+    private formatGregorianDate;
+    private formatHijriDate;
+    onYearChange(event: Event): void;
+    onMonthChange(event: Event): void;
+    previousMonth(): void;
+    nextMonth(): void;
+    toggleMode(): void;
+    selectToday(): void;
+    onSubmit(): void;
+    incrementTime(type: 'hours' | 'minutes' | 'seconds'): void;
+    decrementTime(type: 'hours' | 'minutes' | 'seconds'): void;
+    onTimeChange(type: 'hours' | 'minutes' | 'seconds', event: any): void;
+    setAMPM(pm: boolean): void;
+    private formatTime;
+    private updateSelectedDateTime;
+    getCustomStyles(): any;
+}
+export type { SelectedDate, DatePickerStyles, DateMode, Direction, Locale };

package/dist/lib/hijri-date-picker.component.js

@@ -0,0 +1,647 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import HijriDate, { toHijri } from 'hijri-date/lib/safe';
+import { GREGORIAN_MONTHS_EN, GREGORIAN_MONTHS_AR, HIJRI_MONTHS_EN, HIJRI_MONTHS_AR, WEEKDAY_NAMES_EN, WEEKDAY_NAMES_AR } from './hijri-date-picker.types';
+let HijriDatePickerComponent = class HijriDatePickerComponent {
+    // Mode & Configuration
+    canChangeMode = true;
+    mode = 'greg';
+    dir = 'ltr';
+    locale = 'en';
+    // Validation
+    futureValidation = true;
+    futureYearsLimit = 10;
+    isRequired = false;
+    // Selection
+    multiple = false;
+    showConfirmButton = false;
+    initialSelectedDate; // For single selection mode - bind initial date
+    initialSelectedDates; // For multiple selection mode - bind initial dates
+    // Labels
+    submitTextButton = 'Submit';
+    todaysDateText = 'Today';
+    ummAlQuraDateText = 'Umm Al-Qura Calendar';
+    yearSelectLabel = 'Year';
+    monthSelectLabel = 'Month';
+    // Display Options
+    todaysDateSection = true;
+    markToday = true;
+    disableYearPicker = false;
+    disableMonthPicker = false;
+    disableDayPicker = false;
+    // Styling
+    styles = {};
+    // Time Configuration
+    enableTime = false;
+    timeFormat = '24';
+    minuteStep = 1;
+    enableSeconds = false;
+    defaultTime;
+    // Outputs
+    dateSelected = new EventEmitter();
+    modeChanged = new EventEmitter();
+    // Internal State
+    currentYear = new Date().getFullYear();
+    currentMonth = new Date().getMonth();
+    currentHijriYear = 0;
+    currentHijriMonth = 0;
+    selectedDates = [];
+    calendarDays = [];
+    today = new Date();
+    years = [];
+    months = [];
+    weekdays = [];
+    // Time state
+    selectedTime = {
+        hours: 0,
+        minutes: 0,
+        seconds: 0
+    };
+    isPM = false;
+    ngOnInit() {
+        this.initializeCalendar();
+        this.initializeSelectedDates();
+        this.initializeTime();
+        this.updateLocaleData();
+        this.generateYears();
+        this.generateCalendar();
+    }
+    ngOnChanges(changes) {
+        if (changes['mode'] || changes['locale']) {
+            this.updateLocaleData();
+            this.generateCalendar();
+        }
+        // Handle changes to initial selected dates
+        if (changes['initialSelectedDate'] || changes['initialSelectedDates']) {
+            this.initializeSelectedDates();
+            this.generateCalendar();
+        }
+    }
+    initializeCalendar() {
+        const hijriToday = new HijriDate();
+        this.currentHijriYear = hijriToday.getFullYear();
+        this.currentHijriMonth = hijriToday.getMonth();
+    }
+    initializeSelectedDates() {
+        // Handle single selection mode
+        if (!this.multiple && this.initialSelectedDate) {
+            this.selectedDates = [this.createSelectedDate(this.initialSelectedDate)];
+        }
+        // Handle multiple selection mode
+        if (this.multiple && this.initialSelectedDates && this.initialSelectedDates.length > 0) {
+            this.selectedDates = this.initialSelectedDates.map(date => this.createSelectedDate(date));
+        }
+    }
+    initializeTime() {
+        if (!this.enableTime) {
+            return;
+        }
+        // Set default time if provided
+        if (this.defaultTime) {
+            this.selectedTime = {
+                hours: this.defaultTime.hours,
+                minutes: this.defaultTime.minutes,
+                seconds: this.defaultTime.seconds || 0
+            };
+            // Set AM/PM for 12-hour format
+            if (this.timeFormat === '12') {
+                this.isPM = this.selectedTime.hours >= 12;
+            }
+        }
+        else {
+            // Default to current time
+            const now = new Date();
+            this.selectedTime = {
+                hours: now.getHours(),
+                minutes: now.getMinutes(),
+                seconds: now.getSeconds()
+            };
+            this.isPM = this.selectedTime.hours >= 12;
+        }
+    }
+    updateLocaleData() {
+        // Update weekday names
+        this.weekdays = this.locale === 'ar' ? WEEKDAY_NAMES_AR : WEEKDAY_NAMES_EN;
+        // Update month names based on mode and locale
+        if (this.mode === 'hijri') {
+            this.months = this.locale === 'ar' ? HIJRI_MONTHS_AR : HIJRI_MONTHS_EN;
+        }
+        else {
+            this.months = this.locale === 'ar' ? GREGORIAN_MONTHS_AR : GREGORIAN_MONTHS_EN;
+        }
+    }
+    generateYears() {
+        const currentYear = this.mode === 'hijri' ? this.currentHijriYear : this.currentYear;
+        const startYear = currentYear - 100;
+        const endYear = currentYear + this.futureYearsLimit;
+        this.years = [];
+        for (let year = startYear; year <= endYear; year++) {
+            this.years.push(year);
+        }
+    }
+    generateCalendar() {
+        this.calendarDays = [];
+        if (this.mode === 'hijri') {
+            this.generateHijriCalendar();
+        }
+        else {
+            this.generateGregorianCalendar();
+        }
+    }
+    generateGregorianCalendar() {
+        const firstDay = new Date(this.currentYear, this.currentMonth, 1);
+        const lastDay = new Date(this.currentYear, this.currentMonth + 1, 0);
+        const startingDayOfWeek = firstDay.getDay();
+        const daysInMonth = lastDay.getDate();
+        // Add empty cells for days before the first day of the month
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            this.calendarDays.push({ day: null, disabled: true });
+        }
+        // Add days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const date = new Date(this.currentYear, this.currentMonth, day);
+            const isToday = this.isSameDay(date, this.today);
+            const isDisabled = this.isDateDisabled(date);
+            const isSelected = this.isDateSelected(date);
+            this.calendarDays.push({
+                day,
+                date,
+                isToday,
+                isDisabled,
+                isSelected,
+                disabled: false
+            });
+        }
+    }
+    generateHijriCalendar() {
+        const hijriDate = new HijriDate(this.currentHijriYear, this.currentHijriMonth, 1);
+        const gregorianDate = hijriDate.toGregorian();
+        const startingDayOfWeek = gregorianDate.getDay();
+        // Get days in Hijri month (typically 29 or 30)
+        const daysInMonth = this.getDaysInHijriMonth(this.currentHijriYear, this.currentHijriMonth);
+        // Add empty cells for days before the first day of the month
+        for (let i = 0; i < startingDayOfWeek; i++) {
+            this.calendarDays.push({ day: null, disabled: true });
+        }
+        // Add days of the month
+        for (let day = 1; day <= daysInMonth; day++) {
+            const hijriDay = new HijriDate(this.currentHijriYear, this.currentHijriMonth, day);
+            const gregorianDay = hijriDay.toGregorian();
+            const isToday = this.isSameDay(gregorianDay, this.today);
+            const isDisabled = this.isDateDisabled(gregorianDay);
+            const isSelected = this.isDateSelected(gregorianDay);
+            this.calendarDays.push({
+                day,
+                date: gregorianDay,
+                hijriDate: hijriDay,
+                isToday,
+                isDisabled,
+                isSelected,
+                disabled: false
+            });
+        }
+    }
+    getDaysInHijriMonth(year, month) {
+        // Try to create the 30th day; if it fails, the month has 29 days
+        try {
+            new HijriDate(year, month, 30);
+            return 30;
+        }
+        catch {
+            return 29;
+        }
+    }
+    isSameDay(date1, date2) {
+        return date1.getFullYear() === date2.getFullYear() &&
+            date1.getMonth() === date2.getMonth() &&
+            date1.getDate() === date2.getDate();
+    }
+    isDateDisabled(date) {
+        if (this.futureValidation) {
+            const maxDate = new Date();
+            maxDate.setFullYear(maxDate.getFullYear() + this.futureYearsLimit);
+            return date > maxDate;
+        }
+        return false;
+    }
+    isDateSelected(date) {
+        return this.selectedDates.some(selected => this.isSameDay(selected.gregorian, date));
+    }
+    onDayClick(dayInfo) {
+        if (dayInfo.disabled || dayInfo.isDisabled) {
+            return;
+        }
+        const selectedDate = this.createSelectedDate(dayInfo.date);
+        if (this.multiple) {
+            const index = this.selectedDates.findIndex(d => this.isSameDay(d.gregorian, dayInfo.date));
+            if (index > -1) {
+                this.selectedDates.splice(index, 1);
+            }
+            else {
+                this.selectedDates.push(selectedDate);
+            }
+            if (!this.showConfirmButton) {
+                this.dateSelected.emit([...this.selectedDates]);
+            }
+        }
+        else {
+            this.selectedDates = [selectedDate];
+            if (!this.showConfirmButton) {
+                this.dateSelected.emit(selectedDate);
+            }
+        }
+        this.generateCalendar();
+    }
+    createSelectedDate(date) {
+        const hijriDate = toHijri(date);
+        // If time is enabled, set the time on the date object
+        if (this.enableTime) {
+            let hours24 = this.selectedTime.hours;
+            if (this.timeFormat === '12') {
+                if (this.isPM && this.selectedTime.hours !== 12) {
+                    hours24 = this.selectedTime.hours + 12;
+                }
+                else if (!this.isPM && this.selectedTime.hours === 12) {
+                    hours24 = 0;
+                }
+            }
+            date.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
+        }
+        return {
+            gregorian: date,
+            hijri: {
+                year: hijriDate.getFullYear(),
+                month: hijriDate.getMonth(),
+                day: hijriDate.getDate()
+            },
+            time: this.enableTime ? {
+                hours: date.getHours(),
+                minutes: date.getMinutes(),
+                seconds: date.getSeconds()
+            } : undefined,
+            formatted: {
+                gregorian: this.formatGregorianDate(date),
+                hijri: this.formatHijriDate(hijriDate),
+                time: this.enableTime ? this.formatTime(date.getHours(), date.getMinutes(), date.getSeconds()) : undefined
+            }
+        };
+    }
+    formatGregorianDate(date) {
+        const day = date.getDate();
+        const month = this.locale === 'ar' ? GREGORIAN_MONTHS_AR[date.getMonth()] : GREGORIAN_MONTHS_EN[date.getMonth()];
+        const year = date.getFullYear();
+        return this.locale === 'ar'
+            ? `${day} ${month} ${year}`
+            : `${month} ${day}, ${year}`;
+    }
+    formatHijriDate(hijriDate) {
+        const day = hijriDate.getDate();
+        const month = this.locale === 'ar'
+            ? HIJRI_MONTHS_AR[hijriDate.getMonth()]
+            : HIJRI_MONTHS_EN[hijriDate.getMonth()];
+        const year = hijriDate.getFullYear();
+        return this.locale === 'ar'
+            ? `${day} ${month} ${year} هـ`
+            : `${day} ${month} ${year} AH`;
+    }
+    onYearChange(event) {
+        const year = parseInt(event.target.value);
+        if (this.mode === 'hijri') {
+            this.currentHijriYear = year;
+        }
+        else {
+            this.currentYear = year;
+        }
+        this.generateCalendar();
+    }
+    onMonthChange(event) {
+        const month = parseInt(event.target.value);
+        if (this.mode === 'hijri') {
+            this.currentHijriMonth = month;
+        }
+        else {
+            this.currentMonth = month;
+        }
+        this.generateCalendar();
+    }
+    previousMonth() {
+        if (this.mode === 'hijri') {
+            if (this.currentHijriMonth === 0) {
+                this.currentHijriMonth = 11;
+                this.currentHijriYear--;
+            }
+            else {
+                this.currentHijriMonth--;
+            }
+        }
+        else {
+            if (this.currentMonth === 0) {
+                this.currentMonth = 11;
+                this.currentYear--;
+            }
+            else {
+                this.currentMonth--;
+            }
+        }
+        this.generateCalendar();
+    }
+    nextMonth() {
+        if (this.mode === 'hijri') {
+            if (this.currentHijriMonth === 11) {
+                this.currentHijriMonth = 0;
+                this.currentHijriYear++;
+            }
+            else {
+                this.currentHijriMonth++;
+            }
+        }
+        else {
+            if (this.currentMonth === 11) {
+                this.currentMonth = 0;
+                this.currentYear++;
+            }
+            else {
+                this.currentMonth++;
+            }
+        }
+        this.generateCalendar();
+    }
+    toggleMode() {
+        if (!this.canChangeMode) {
+            return;
+        }
+        this.mode = this.mode === 'greg' ? 'hijri' : 'greg';
+        this.updateLocaleData();
+        this.generateYears();
+        this.generateCalendar();
+        this.modeChanged.emit(this.mode);
+    }
+    selectToday() {
+        const today = new Date();
+        this.onDayClick({ date: today, disabled: false, isDisabled: false });
+    }
+    onSubmit() {
+        if (this.isRequired && this.selectedDates.length === 0) {
+            return;
+        }
+        if (this.multiple) {
+            this.dateSelected.emit([...this.selectedDates]);
+        }
+        else if (this.selectedDates.length > 0) {
+            this.dateSelected.emit(this.selectedDates[0]);
+        }
+    }
+    // Time handling methods
+    incrementTime(type) {
+        if (type === 'hours') {
+            const max = this.timeFormat === '12' ? 12 : 23;
+            this.selectedTime.hours = (this.selectedTime.hours + 1) > max ? (this.timeFormat === '12' ? 1 : 0) : this.selectedTime.hours + 1;
+        }
+        else if (type === 'minutes') {
+            this.selectedTime.minutes = (this.selectedTime.minutes + this.minuteStep) > 59 ? 0 : this.selectedTime.minutes + this.minuteStep;
+        }
+        else if (type === 'seconds') {
+            this.selectedTime.seconds = (this.selectedTime.seconds + 1) > 59 ? 0 : this.selectedTime.seconds + 1;
+        }
+        this.updateSelectedDateTime();
+    }
+    decrementTime(type) {
+        if (type === 'hours') {
+            const min = this.timeFormat === '12' ? 1 : 0;
+            const max = this.timeFormat === '12' ? 12 : 23;
+            this.selectedTime.hours = (this.selectedTime.hours - 1) < min ? max : this.selectedTime.hours - 1;
+        }
+        else if (type === 'minutes') {
+            this.selectedTime.minutes = (this.selectedTime.minutes - this.minuteStep) < 0 ? 59 : this.selectedTime.minutes - this.minuteStep;
+        }
+        else if (type === 'seconds') {
+            this.selectedTime.seconds = (this.selectedTime.seconds - 1) < 0 ? 59 : this.selectedTime.seconds - 1;
+        }
+        this.updateSelectedDateTime();
+    }
+    onTimeChange(type, event) {
+        const value = parseInt(event.target.value) || 0;
+        if (type === 'hours') {
+            const min = this.timeFormat === '12' ? 1 : 0;
+            const max = this.timeFormat === '12' ? 12 : 23;
+            this.selectedTime.hours = Math.max(min, Math.min(max, value));
+        }
+        else if (type === 'minutes') {
+            this.selectedTime.minutes = Math.max(0, Math.min(59, value));
+        }
+        else if (type === 'seconds') {
+            this.selectedTime.seconds = Math.max(0, Math.min(59, value));
+        }
+        this.updateSelectedDateTime();
+    }
+    setAMPM(pm) {
+        this.isPM = pm;
+        this.updateSelectedDateTime();
+    }
+    formatTime(hours, minutes, seconds) {
+        if (this.timeFormat === '12') {
+            const displayHours = hours % 12 || 12;
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            const minutesStr = minutes.toString().padStart(2, '0');
+            if (this.enableSeconds) {
+                const secondsStr = seconds.toString().padStart(2, '0');
+                return `${displayHours}:${minutesStr}:${secondsStr} ${ampm}`;
+            }
+            return `${displayHours}:${minutesStr} ${ampm}`;
+        }
+        else {
+            const hoursStr = hours.toString().padStart(2, '0');
+            const minutesStr = minutes.toString().padStart(2, '0');
+            if (this.enableSeconds) {
+                const secondsStr = seconds.toString().padStart(2, '0');
+                return `${hoursStr}:${minutesStr}:${secondsStr}`;
+            }
+            return `${hoursStr}:${minutesStr}`;
+        }
+    }
+    updateSelectedDateTime() {
+        if (!this.enableTime || this.selectedDates.length === 0) {
+            return;
+        }
+        // Convert 12-hour to 24-hour if needed
+        let hours24 = this.selectedTime.hours;
+        if (this.timeFormat === '12') {
+            if (this.isPM && this.selectedTime.hours !== 12) {
+                hours24 = this.selectedTime.hours + 12;
+            }
+            else if (!this.isPM && this.selectedTime.hours === 12) {
+                hours24 = 0;
+            }
+        }
+        // Update all selected dates with new time
+        this.selectedDates = this.selectedDates.map(selectedDate => {
+            const newDate = new Date(selectedDate.gregorian);
+            newDate.setHours(hours24, this.selectedTime.minutes, this.selectedTime.seconds);
+            return {
+                ...selectedDate,
+                gregorian: newDate,
+                time: {
+                    hours: hours24,
+                    minutes: this.selectedTime.minutes,
+                    seconds: this.selectedTime.seconds
+                },
+                formatted: {
+                    ...selectedDate.formatted,
+                    time: this.formatTime(hours24, this.selectedTime.minutes, this.selectedTime.seconds)
+                }
+            };
+        });
+    }
+    getCustomStyles() {
+        return {
+            '--primary-color': this.styles.primaryColor || '#4f46e5',
+            '--secondary-color': this.styles.secondaryColor || '#818cf8',
+            '--background-color': this.styles.backgroundColor || '#ffffff',
+            '--text-color': this.styles.textColor || '#1f2937',
+            '--selected-date-color': this.styles.selectedDateColor || '#ffffff',
+            '--selected-date-background': this.styles.selectedDateBackground || '#4f46e5',
+            '--today-color': this.styles.todayColor || '#10b981',
+            '--disabled-color': this.styles.disabledColor || '#d1d5db',
+            '--border-color': this.styles.borderColor || '#e5e7eb',
+            '--hover-color': this.styles.hoverColor || '#f3f4f6',
+            '--font-family': this.styles.fontFamily || 'system-ui, -apple-system, sans-serif',
+            '--font-size': this.styles.fontSize || '14px',
+            '--border-radius': this.styles.borderRadius || '8px'
+        };
+    }
+};
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "canChangeMode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "mode", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "dir", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "locale", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "futureValidation", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], HijriDatePickerComponent.prototype, "futureYearsLimit", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "isRequired", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "multiple", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "showConfirmButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Date)
+], HijriDatePickerComponent.prototype, "initialSelectedDate", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Array)
+], HijriDatePickerComponent.prototype, "initialSelectedDates", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "submitTextButton", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "todaysDateText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "ummAlQuraDateText", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "yearSelectLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "monthSelectLabel", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "todaysDateSection", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "markToday", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "disableYearPicker", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "disableMonthPicker", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "disableDayPicker", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], HijriDatePickerComponent.prototype, "styles", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "enableTime", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", String)
+], HijriDatePickerComponent.prototype, "timeFormat", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Number)
+], HijriDatePickerComponent.prototype, "minuteStep", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Boolean)
+], HijriDatePickerComponent.prototype, "enableSeconds", void 0);
+__decorate([
+    Input(),
+    __metadata("design:type", Object)
+], HijriDatePickerComponent.prototype, "defaultTime", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], HijriDatePickerComponent.prototype, "dateSelected", void 0);
+__decorate([
+    Output(),
+    __metadata("design:type", Object)
+], HijriDatePickerComponent.prototype, "modeChanged", void 0);
+HijriDatePickerComponent = __decorate([
+    Component({
+        selector: 'hijri-date-picker',
+        standalone: true,
+        imports: [CommonModule],
+        templateUrl: './hijri-date-picker.component.html',
+        styleUrls: ['./hijri-date-picker.component.css']
+    })
+], HijriDatePickerComponent);
+export { HijriDatePickerComponent };

package/dist/lib/hijri-date-picker.types.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Date picker mode types
+ */
+export type DateMode = 'greg' | 'hijri';
+/**
+ * Text direction types
+ */
+export type Direction = 'ltr' | 'rtl';
+/**
+ * Locale types
+ */
+export type Locale = 'en' | 'ar';
+/**
+ * Selected date information
+ */
+export interface SelectedDate {
+    gregorian: Date;
+    hijri: {
+        year: number;
+        month: number;
+        day: number;
+    };
+    time?: {
+        hours: number;
+        minutes: number;
+        seconds: number;
+    };
+    formatted: {
+        gregorian: string;
+        hijri: string;
+        time?: string;
+    };
+}
+/**
+ * Time format types
+ */
+export type TimeFormat = '12' | '24';
+/**
+ * Custom styling configuration
+ */
+export interface DatePickerStyles {
+    primaryColor?: string;
+    secondaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    selectedDateColor?: string;
+    selectedDateBackground?: string;
+    todayColor?: string;
+    disabledColor?: string;
+    borderColor?: string;
+    hoverColor?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    borderRadius?: string;
+}
+/**
+ * Label configuration
+ */
+export interface DatePickerLabels {
+    submitTextButton?: string;
+    todaysDateText?: string;
+    ummAlQuraDateText?: string;
+    yearSelectLabel?: string;
+    monthSelectLabel?: string;
+}
+/**
+ * Display configuration
+ */
+export interface DatePickerDisplay {
+    todaysDateSection?: boolean;
+    markToday?: boolean;
+    disableYearPicker?: boolean;
+    disableMonthPicker?: boolean;
+    disableDayPicker?: boolean;
+}
+/**
+ * Month names in different locales
+ */
+export declare const GREGORIAN_MONTHS_EN: string[];
+export declare const GREGORIAN_MONTHS_AR: string[];
+export declare const HIJRI_MONTHS_EN: string[];
+export declare const HIJRI_MONTHS_AR: string[];
+export declare const WEEKDAY_NAMES_EN: string[];
+export declare const WEEKDAY_NAMES_AR: string[];

package/dist/lib/hijri-date-picker.types.js

@@ -0,0 +1,21 @@
+/**
+ * Month names in different locales
+ */
+export const GREGORIAN_MONTHS_EN = [
+    'January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'
+];
+export const GREGORIAN_MONTHS_AR = [
+    'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
+    'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر'
+];
+export const HIJRI_MONTHS_EN = [
+    'Muharram', 'Safar', 'Rabi\' al-Awwal', 'Rabi\' al-Thani', 'Jumada al-Awwal', 'Jumada al-Thani',
+    'Rajab', 'Sha\'ban', 'Ramadan', 'Shawwal', 'Dhu al-Qi\'dah', 'Dhu al-Hijjah'
+];
+export const HIJRI_MONTHS_AR = [
+    'محرم', 'صفر', 'ربيع الأول', 'ربيع الثاني', 'جمادى الأولى', 'جمادى الثانية',
+    'رجب', 'شعبان', 'رمضان', 'شوال', 'ذو القعدة', 'ذو الحجة'
+];
+export const WEEKDAY_NAMES_EN = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+export const WEEKDAY_NAMES_AR = ['الأحد', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت'];

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "hijri-date-time-picker",
+  "version": "1.0.0",
+  "description": "Angular standalone component for dual-mode Gregorian and Hijri date selection",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "angular",
+    "hijri",
+    "gregorian",
+    "date-picker",
+    "calendar",
+    "umm-al-qura"
+  ],
+  "author": "Hany",
+  "license": "MIT",
+  "homepage": "https://github.com/hanygamal72/hijri-date-time-picker#readme",
+  "bugs": {
+    "url": "https://github.com/hanygamal72/hijri-date-time-picker/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hanygamal72/hijri-date-time-picker.git"
+  },
+  "peerDependencies": {
+    "@angular/core": ">=15.0.0",
+    "@angular/common": ">=15.0.0"
+  },
+  "dependencies": {
+    "hijri-date": "^0.2.2"
+  },
+  "devDependencies": {
+    "@angular/core": "^17.0.0",
+    "@angular/common": "^17.0.0",
+    "@angular/platform-browser": "^17.0.0",
+    "typescript": "^5.0.0"
+  }
+}