date-range-angular-lib v1.0.2

Angular Date Range Picker

A flexible, standalone Angular date range picker component with built-in support for RTL languages (Arabic/English) and customizable styling.

Features

• 📅 Standalone component architecture
• 🌐 Built-in RTL support (Arabic/English)
• 🎨 Customizable styling
• 📱 Responsive design
• 🔄 Two-way data binding
• 🎯 Min/Max date restrictions
• 🧩 Flexible date range selection
• 💫 Smooth animations
• 🎈 Lightweight

Installation

npm install date-range-angular-lib @ngx-translate/core

Usage

1. Import the component in your module or standalone component:

import { AngularDateRangeComponent } from 'angular-date-range';

@Component({
  // ...
  imports: [AngularDateRangeComponent]
})

2. Use it in your template:

<angular-date-range
  [defaultLang]="'en'"
  [minDate]="minDate"
  [maxDate]="maxDate"
  [showLabel]="true"
  [showToDate]="true"
  [initialFromDate]="startDate"
  [initialToDate]="endDate"
  (dateRangeChange)="onDateRangeChange($event)"
  (languageChange)="onLanguageChange($event)"
>
</angular-date-range>

Inputs

Outputs

Example

import { Component } from '@angular/core';
import { AngularDateRangeComponent } from 'angular-date-range';

@Component({
  selector: 'app-root',
  template: `
    <angular-date-range
      [minDate]="minDate"
      [maxDate]="maxDate"
      (dateRangeChange)="onDateRangeChange($event)"
    >
    </angular-date-range>
  `,
  standalone: true,
  imports: [AngularDateRangeComponent]
})
export class AppComponent {
  minDate = new Date(2024, 0, 1);
  maxDate = new Date(2024, 11, 31);

  onDateRangeChange(range: { fromDate: string | Date | null; toDate: string | Date | null }) {
    console.log('Date range changed:', range);
  }
}

Styling

The component uses SCSS and can be customized using CSS variables or by overriding the default classes. The main wrapper class is .calendar-container.

Example of customizing styles:

:host ::ng-deep {
  .calendar-container {
    .date-field {
      border-color: #your-color;
    }

    .calendar-day.selected {
      background-color: #your-primary-color;
    }
  }
}

RTL Support

The component automatically handles RTL layouts based on the selected language. When Arabic is selected, the layout switches to RTL mode, including:

• Calendar navigation
• Date selection
• Input field alignment
• Icon positioning

Translations

The component comes with built-in translations for English and Arabic. You can customize the translations by providing your own translation service:

import { translations } from 'angular-date-range';

// Extend or modify the existing translations
const customTranslations = {
  ...translations,
  ar: {
    ...translations.ar,
    fromDate: 'تاريخ البداية',
    // Add more custom translations
  }
};

Requirements

• Angular 17.x or higher
• @ngx-translate/core

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

This project is licensed under the MIT License - see the LICENSE file for details.