hijri-date-time-picker 1.0.31 → 1.0.32

package/docs/MIN_MAX_DATE.md

@@ -1,326 +0,0 @@
-# Min/Max Date Feature Guide
-
-This guide demonstrates how to use the `minDate` and `maxDate` features in the Hijri Date Time Picker component to restrict date selection within specific ranges.
-
-## Overview
-
-The `minDate` and `maxDate` inputs allow you to define the earliest and latest dates that users can select. Dates outside this range will be disabled and cannot be selected.
-
-## Basic Usage
-
-### Setting a Minimum Date
-
-```typescript
-import { Component } from '@angular/core';
-import { HijriDatePickerComponent } from 'hijri-date-time-picker';
-
-@Component({
-  selector: 'app-example',
-  standalone: true,
-  imports: [HijriDatePickerComponent],
-  template: `
-    <hijri-date-picker
-      [minDate]="minDate"
-      (dateSelected)="onDateSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class ExampleComponent {
-  // Only allow dates from today onwards
-  minDate = new Date();
-
-  onDateSelected(date: any) {
-    console.log('Selected:', date);
-  }
-}
-```
-
-### Setting a Maximum Date
-
-```typescript
-@Component({
-  template: `
-    <hijri-date-picker
-      [maxDate]="maxDate"
-      (dateSelected)="onDateSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class ExampleComponent {
-  // Only allow dates up to today
-  maxDate = new Date();
-  
-  onDateSelected(date: any) {
-    console.log('Selected:', date);
-  }
-}
-```
-
-### Combining Min and Max Dates
-
-```typescript
-@Component({
-  template: `
-    <hijri-date-picker
-      [minDate]="minDate"
-      [maxDate]="maxDate"
-      [futureValidation]="false"
-      (dateSelected)="onDateSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class ExampleComponent {
-  // Allow only dates within the last 30 days
-  minDate = new Date(new Date().setDate(new Date().getDate() - 30));
-  maxDate = new Date();
-  
-  onDateSelected(date: any) {
-    console.log('Selected:', date);
-  }
-}
-```
-
-## Common Use Cases
-
-### 1. Booking System (Future Dates Only)
-
-```typescript
-export class BookingComponent {
-  // Start from today
-  minDate = new Date();
-  
-  // Allow bookings up to 90 days in advance
-  maxDate = new Date(new Date().setDate(new Date().getDate() + 90));
-}
-```
-
-### 2. Historical Data Entry (Past Dates Only)
-
-```typescript
-export class HistoricalDataComponent {
-  // Allow dates from January 1, 2000
-  minDate = new Date('2000-01-01');
-  
-  // Up to yesterday
-  maxDate = new Date(new Date().setDate(new Date().getDate() - 1));
-}
-```
-
-### 3. Event Registration (Specific Date Range)
-
-```typescript
-export class EventRegistrationComponent {
-  // Registration opens on a specific date
-  minDate = new Date('2024-01-15');
-  
-  // Registration closes on event date
-  maxDate = new Date('2024-03-30');
-}
-```
-
-### 4. Age Verification (Date of Birth)
-
-```typescript
-export class AgeVerificationComponent {
-  // Must be at least 18 years old
-  maxDate = new Date(
-    new Date().setFullYear(new Date().getFullYear() - 18)
-  );
-  
-  // Maximum age of 100 years
-  minDate = new Date(
-    new Date().setFullYear(new Date().getFullYear() - 100)
-  );
-}
-```
-
-### 5. Dynamic Date Range
-
-```typescript
-export class DynamicRangeComponent {
-  minDate: Date;
-  maxDate: Date;
-
-  constructor() {
-    this.updateDateRange('last30days');
-  }
-
-  updateDateRange(range: string) {
-    const today = new Date();
-    
-    switch(range) {
-      case 'last7days':
-        this.minDate = new Date(today.setDate(today.getDate() - 7));
-        this.maxDate = new Date();
-        break;
-      
-      case 'last30days':
-        this.minDate = new Date(today.setDate(today.getDate() - 30));
-        this.maxDate = new Date();
-        break;
-      
-      case 'next30days':
-        this.minDate = new Date();
-        this.maxDate = new Date(today.setDate(today.getDate() + 30));
-        break;
-    }
-  }
-}
-```
-
-## Working with Hijri Calendar
-
-The `minDate` and `maxDate` work seamlessly with both Gregorian and Hijri calendars. The component automatically converts the dates to the appropriate calendar system.
-
-```typescript
-@Component({
-  template: `
-    <hijri-date-picker
-      [mode]="'hijri'"
-      [minDate]="minDate"
-      [maxDate]="maxDate"
-      [locale]="'ar'"
-      [dir]="'rtl'"
-      (dateSelected)="onDateSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class HijriRangeComponent {
-  // The dates are in Gregorian, but will be converted to Hijri
-  minDate = new Date('2024-01-01');
-  maxDate = new Date('2024-12-31');
-  
-  onDateSelected(date: any) {
-    // date object contains both Gregorian and Hijri representations
-    console.log('Gregorian:', date.gregorian);
-    console.log('Hijri:', date.hijri);
-  }
-}
-```
-
-## Disabling Future Validation
-
-When using `minDate` and `maxDate`, you may want to disable the default `futureValidation` feature:
-
-```typescript
-@Component({
-  template: `
-    <hijri-date-picker
-      [minDate]="minDate"
-      [maxDate]="maxDate"
-      [futureValidation]="false"
-      (dateSelected)="onDateSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class CustomRangeComponent {
-  minDate = new Date('2024-01-01');
-  maxDate = new Date('2025-12-31');
-}
-```
-
-## Year and Month Picker Behavior
-
-When `minDate` and `maxDate` are set:
-
-- The **year dropdown** will only show years within the valid range
-- The **month navigation** remains functional, but disabled dates will be shown as disabled
-- Users cannot select disabled dates even if they navigate to those months
-
-## Tips and Best Practices
-
-1. **Always set both min and max**: For the best user experience, set both `minDate` and `maxDate` to clearly define the valid range.
-
-2. **Disable futureValidation**: When using custom date ranges, set `[futureValidation]="false"` to avoid conflicts.
-
-3. **Provide feedback**: Consider showing the valid date range in your UI:
-   ```html
-   <p>Please select a date between {{ minDate | date }} and {{ maxDate | date }}</p>
-   ```
-
-4. **Dynamic ranges**: Update `minDate` and `maxDate` dynamically based on user input or business logic.
-
-5. **Time considerations**: The date comparison ignores the time component, so:
-   ```typescript
-   minDate = new Date(); // Today at current time
-   // Will allow selection of today's date, regardless of current time
-   ```
-
-## Combining with Other Features
-
-### With Multiple Selection
-
-```typescript
-@Component({
-  template: `
-    <hijri-date-picker
-      [multiple]="true"
-      [minDate]="minDate"
-      [maxDate]="maxDate"
-      [showConfirmButton]="true"
-      (dateSelected)="onDatesSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class MultipleWithRangeComponent {
-  minDate = new Date(new Date().setDate(new Date().getDate() - 7));
-  maxDate = new Date();
-  
-  onDatesSelected(dates: any[]) {
-    console.log('Selected dates:', dates);
-  }
-}
-```
-
-### With Time Selection
-
-```typescript
-@Component({
-  template: `
-    <hijri-date-picker
-      [enableTime]="true"
-      [minDate]="minDate"
-      [maxDate]="maxDate"
-      [futureValidation]="false"
-      (dateSelected)="onDateTimeSelected($event)">
-    </hijri-date-picker>
-  `
-})
-export class DateTimeWithRangeComponent {
-  minDate = new Date();
-  maxDate = new Date(new Date().setDate(new Date().getDate() + 30));
-  
-  onDateTimeSelected(dateTime: any) {
-    console.log('Selected date and time:', dateTime);
-  }
-}
-```
-
-## API Reference
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `minDate` | `Date \| undefined` | `undefined` | Minimum selectable date. Dates before this will be disabled. |
-| `maxDate` | `Date \| undefined` | `undefined` | Maximum selectable date. Dates after this will be disabled. |
-
-## Browser Compatibility
-
-The minDate/maxDate feature works in all modern browsers that support the Date object and Angular framework.
-
-## Troubleshooting
-
-### Dates not being disabled
-
-- Verify that `minDate` and `maxDate` are valid Date objects
-- Check that `futureValidation` is set to `false` if you're using custom ranges
-- Ensure dates are in the correct format
-
-### Year dropdown showing wrong years
-
-- The year dropdown automatically adjusts based on `minDate` and `maxDate`
-- If you see unexpected years, check your date values
-
-### Timezone issues
-
-- The component uses local timezone for all date comparisons
-- Be aware of timezone differences when setting dates programmatically

package/ng-package.json

@@ -1,11 +0,0 @@
-{
-  "$schema": "node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "./dist",
-  "lib": {
-    "entryFile": "src/index.ts"
-  },
-  "allowedNonPeerDependencies": [
-    "hijri-date",
-    "remixicon"
-  ]
-}

package/src/demo.ts

@@ -1,246 +0,0 @@
-import { Component } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { HijriDatePickerComponent } from './lib/hijri-date-picker.component';
-import { SelectedDate, DatePickerStyles } from './lib/hijri-date-picker.types';
-
-@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>
-
-        <!-- Example 7: Date Range with minDate and maxDate -->
-        <div class="demo-card">
-          <h2>Date Range (Last 30 Days)</h2>
-          <hijri-date-picker
-            [mode]="'greg'"
-            [locale]="'en'"
-            [minDate]="minDate"
-            [maxDate]="maxDate"
-            [futureValidation]="false"
-            (dateSelected)="onDateSelected($event, 'range')">
-          </hijri-date-picker>
-          <div class="output" *ngIf="selectedDates['range']">
-            <strong>Selected:</strong>
-            <pre>{{ selectedDates['range'] | json }}</pre>
-          </div>
-        </div>
-
-        <!-- Example 8: Future Dates Only with minDate -->
-        <div class="demo-card">
-          <h2>Future Dates Only (Next 60 Days)</h2>
-          <hijri-date-picker
-            [mode]="'greg'"
-            [locale]="'en'"
-            [minDate]="today"
-            [maxDate]="maxFutureDate"
-            [futureValidation]="false"
-            [todaysDateText]="'Select Today or Future'"
-            (dateSelected)="onDateSelected($event, 'futureOnly')">
-          </hijri-date-picker>
-          <div class="output" *ngIf="selectedDates['futureOnly']">
-            <strong>Selected:</strong>
-            <pre>{{ selectedDates['futureOnly'] | 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;
-      }
-    }
-  `]
-})
-export class DemoComponent {
-  selectedDates: { [key: string]: any } = {};
-  
-  // Date range examples
-  today: Date = new Date();
-  minDate: Date = new Date(new Date().setDate(new Date().getDate() - 30)); // 30 days ago
-  maxDate: Date = new Date(); // Today
-  maxFutureDate: Date = new Date(new Date().setDate(new Date().getDate() + 60)); // 60 days from now
-
-  customStyles: DatePickerStyles = {
-    primaryColor: '#059669',
-    secondaryColor: '#34d399',
-    selectedDateBackground: '#059669',
-    todayColor: '#f59e0b',
-    borderRadius: '12px',
-    fontFamily: 'Inter, sans-serif'
-  };
-
-  onDateSelected(date: SelectedDate | SelectedDate[], key: string) {
-    this.selectedDates[key] = date;
-    console.log(`Date selected for ${key}:`, date);
-  }
-}
-
-// Bootstrap the demo application
-bootstrapApplication(DemoComponent);

package/src/index.ts

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