hijri-date-time-picker 1.0.3 → 1.0.31

package/QUICKSTART.md

@@ -0,0 +1,121 @@
+# Quick Start Guide
+
+## Installation
+
+```bash
+cd C:\Users\Hany\.gemini\antigravity\scratch\hijri-date-picker
+npm install
+```
+
+## Build the Library
+
+```bash
+npm run build
+```
+
+## File Overview
+
+### Core Component Files
+- **hijri-date-picker.component.ts** - Main component with all logic (350+ lines)
+- **hijri-date-picker.component.html** - Template with calendar UI
+- **hijri-date-picker.component.css** - Comprehensive styles with theming
+- **hijri-date-picker.types.ts** - TypeScript interfaces and constants
+
+### Configuration
+- **package.json** - NPM package configuration
+- **tsconfig.json** - TypeScript compiler settings
+- **README.md** - Complete documentation with examples
+
+### Demo
+- **demo.ts** - Standalone demo app with 6 different examples
+
+## Quick Usage
+
+### Basic Example
+```typescript
+import { HijriDatePickerComponent } from 'hijri-date-picker';
+
+// In your component
+@Component({
+  imports: [HijriDatePickerComponent],
+  template: `
+    <hijri-date-picker
+      [mode]="'greg'"
+      [locale]="'en'"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+```
+
+### With Date Range (NEW)
+```typescript
+@Component({
+  imports: [HijriDatePickerComponent],
+  template: `
+    <hijri-date-picker
+      [minDate]="minDate"
+      [maxDate]="maxDate"
+      [futureValidation]="false"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class MyComponent {
+  // Allow only dates within last 30 days
+  minDate = new Date(new Date().setDate(new Date().getDate() - 30));
+  maxDate = new Date();
+  
+  onDateSelected(date: any) {
+    console.log('Selected:', date);
+  }
+}
+```
+
+## All Implemented Features
+
+✅ **24+ Input Properties**
+- Mode switching (Gregorian/Hijri)
+- Localization (English/Arabic)
+- RTL/LTR support
+- Single/multiple selection
+- Future date validation
+- **Min/Max date constraints (NEW)**
+- Custom labels (5 inputs)
+- Display toggles (5 inputs)
+- Custom styling (13 CSS properties)
+- Time picker support (5 inputs)
+
+✅ **2 Output Events**
+- dateSelected
+- modeChanged
+
+✅ **Complete Localization**
+- English/Arabic month names
+- Gregorian/Hijri calendar systems
+- RTL layout for Arabic
+
+✅ **Professional UI**
+- Responsive design
+- Smooth animations
+- Hover effects
+- Disabled states
+- Today highlighting
+- Custom theming
+
+## Project Location
+
+```
+C:\Users\Hany\.gemini\antigravity\scratch\hijri-date-picker\
+```
+
+## Next Steps
+
+1. Install dependencies: `npm install`
+2. Build: `npm run build`
+3. Publish to NPM: `npm publish`
+4. Or use locally in your Angular project
+
+## Support
+
+See [README.md](file:///C:/Users/Hany/.gemini/antigravity/scratch/hijri-date-picker/README.md) for complete API documentation and examples.

package/docs/INITIAL_DATE_BINDING.md

@@ -0,0 +1,183 @@
+# Initial Date Binding - Usage Guide
+
+## Overview
+
+The Hijri Date Picker now supports binding initial/pre-selected dates through input properties. This allows you to programmatically set which date(s) should be selected when the calendar loads.
+
+## Single Selection Mode
+
+Use the `initialSelectedDate` input to bind a single date:
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <hijri-date-picker
+      [initialSelectedDate]="myDate"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class ExampleComponent {
+  // Set initial date to today
+  myDate = new Date();
+  
+  // Or set to a specific date
+  // myDate = new Date(2024, 11, 24); // December 24, 2024
+  
+  onDateSelected(date: SelectedDate) {
+    console.log('Selected:', date);
+  }
+}
+```
+
+## Multiple Selection Mode
+
+Use the `initialSelectedDates` input to bind multiple dates:
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <hijri-date-picker
+      [multiple]="true"
+      [initialSelectedDates]="myDates"
+      [showConfirmButton]="true"
+      (dateSelected)="onDatesSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class ExampleComponent {
+  // Pre-select multiple dates
+  myDates = [
+    new Date(2024, 11, 24),  // December 24, 2024
+    new Date(2024, 11, 25),  // December 25, 2024
+    new Date(2024, 11, 31)   // December 31, 2024
+  ];
+  
+  onDatesSelected(dates: SelectedDate[]) {
+    console.log('Selected dates:', dates);
+  }
+}
+```
+
+## Dynamic Updates
+
+The component automatically updates when the input values change:
+
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  template: `
+    <button (click)="setToday()">Set to Today</button>
+    <button (click)="setCustomDate()">Set Custom Date</button>
+    
+    <hijri-date-picker
+      [initialSelectedDate]="selectedDate"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class ExampleComponent {
+  selectedDate = new Date();
+  
+  setToday() {
+    this.selectedDate = new Date();
+  }
+  
+  setCustomDate() {
+    this.selectedDate = new Date(2024, 0, 1); // January 1, 2024
+  }
+  
+  onDateSelected(date: SelectedDate) {
+    console.log('Selected:', date);
+  }
+}
+```
+
+## Hijri Mode Example
+
+Works seamlessly with Hijri calendar mode:
+
+```typescript
+@Component({
+  selector: 'app-hijri-example',
+  template: `
+    <hijri-date-picker
+      [mode]="'hijri'"
+      [locale]="'ar'"
+      [dir]="'rtl'"
+      [initialSelectedDate]="myDate"
+      (dateSelected)="onDateSelected($event)">
+    </hijri-date-picker>
+  `
+})
+export class HijriExampleComponent {
+  myDate = new Date(); // Gregorian date - will be converted to Hijri
+  
+  onDateSelected(date: SelectedDate) {
+    console.log('Gregorian:', date.gregorian);
+    console.log('Hijri:', date.hijri);
+    console.log('Formatted Hijri:', date.formatted.hijri);
+  }
+}
+```
+
+## Key Points
+
+- **Single mode**: Use `initialSelectedDate` (singular) with a single `Date` object
+- **Multiple mode**: Use `initialSelectedDates` (plural) with an array of `Date` objects
+- **Automatic conversion**: Gregorian dates are automatically converted to Hijri when in Hijri mode
+- **Reactive**: Changes to the input properties automatically update the calendar
+- **Type-safe**: Full TypeScript support with proper type definitions
+
+## Complete Example
+
+```typescript
+import { Component } from '@angular/core';
+import { HijriDatePickerComponent, SelectedDate } from 'hijri-date-picker';
+
+@Component({
+  selector: 'app-date-picker-demo',
+  standalone: true,
+  imports: [HijriDatePickerComponent],
+  template: `
+    <div class="demo">
+      <h2>Pre-selected Date Example</h2>
+      
+      <hijri-date-picker
+        [mode]="'greg'"
+        [locale]="'en'"
+        [initialSelectedDate]="preselectedDate"
+        [canChangeMode]="true"
+        (dateSelected)="handleDateSelection($event)">
+      </hijri-date-picker>
+      
+      <div *ngIf="result">
+        <h3>Selected Date:</h3>
+        <p>Gregorian: {{ result.formatted.gregorian }}</p>
+        <p>Hijri: {{ result.formatted.hijri }}</p>
+      </div>
+    </div>
+  `
+})
+export class DatePickerDemoComponent {
+  // Pre-select tomorrow's date
+  preselectedDate = new Date();
+  result?: SelectedDate;
+  
+  constructor() {
+    this.preselectedDate.setDate(this.preselectedDate.getDate() + 1);
+  }
+  
+  handleDateSelection(date: SelectedDate) {
+    this.result = date;
+  }
+}
+```

package/docs/MIN_MAX_DATE.md

@@ -0,0 +1,326 @@
+# 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

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

package/package.json

@@ -1,14 +1,8 @@
 {
   "name": "hijri-date-time-picker",
-  "version": "1.0.3",
+  "version": "1.0.31",
   "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"
-  ],
+  "sideEffects": false,
   "scripts": {
     "build": "ng-packagr -p ng-package.json",
     "build:watch": "ng-packagr -p ng-package.json --watch",