Date Range Picker Angular Library

The ngx-angular-date-range-picker library provides a customizable date range picker component for Angular applications.

Installation

To use this library in your Angular project, you need to install it using npm:

npm install ngx-angular-date-range-picker

Usage

1. Import the DateRangePickerModule into your application module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DateRangePickerModule } from 'ngx-angular-date-range-picker';

@NgModule({
  declarations: [/* ... */],
  imports: [
    BrowserModule,
    DateRangePickerModule, // Add this line
  ],
  bootstrap: [/* ... */],
})
export class AppModule {}

2. In your component template, use the ngx-angular-date-range-picker component:

<date-range-picker [props]="calendar" [control]="date"></date-range-picker>

3. In your component TypeScript file, configure the calendarType and the FormControl:

import { Component } from '@angular/core';
import { FormControl } from '@angular/forms';
import { calendarType } from 'ngx-angular-date-range-picker';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  date = new FormControl();

  calendar: calendarType = {
    type: 'day',
    date: new Date(),
    containDarkMode: true,
    locale: 'en',
    backgroundColorPrimary: '#F1BF98',
    backgroundColorSecondary: '#FDF4ED',
    maxDate: new Date(),
    minDate: new Date(),
  };
}

Options

Features

• Supports various date range types (day, month, year).
• Allows formatting based on different regions.
• Provides internationalization (i18n) support.
• Customizable CSS styling.
• Supports dark mode.
• Allows setting a maximum and minimum date range.
• Supports reactive forms.
• Supports Angular 12 and 14.
• Supports Angular Universal.

Browser Support

The date range picker component supports the following browsers:

| Browser | Version | | --------------- | ---------- | | Google Chrome | Latest | | Mozilla Firefox | Latest | | Microsoft Edge | Latest | | Safari | Latest (Testing) | | Internet Explorer | 11 and above |

You can customize the browser versions and additional information as needed.

Contributions

Contributions are welcome! Feel free to open issues or pull requests on the GitHub repository.

Author

• GitHub: @JordaoNhanga15
• LinkedIn: Jordão de Oliveira

Light will always guide our paths through the shadows. Deep Peace!!!

T.'.F.'.A.'.

Demo