Ngx-angular-date-range-picker NPM

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

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 {}

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

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

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(),
  };
}