ng-material-date-range-picker

Description:

This library is build on top of angular material date-picker to provide date range selection with two views and predefined date options.

Getting Started with Ng Material Date Range Picker

The following section explains the steps required to create a simple 2 view Date Range Picker component and demonstrates its basic usage.

Dependencies

To use the 2 view Date Range Picker component in your application, install the following dependency packages:

1. angular (version 17.x)
2. angular-material (version 17.x)

Setup Angular Environment

Angular provides an easy way to set up Angular CLI projects using the Angular CLI tool.

1. Install the CLI application globally:

npm install -g @angular/cli

2. Create a new application:

ng new ng-date-range-picker-app

3. Navigate to the created project folder:

cd ng-date-range-picker-app

Installing Dependencies

To use the 2 view Date Range Picker component in your application, install the following dependency packages:

1. Angular Material Lib:

npm i @angular/material@17

2. Add bootstrap css inside angular.json:

"styles": [
        "src/styles.css",
        "@angular/material/prebuilt-themes/indigo-pink.css"
      ],

Installing Ng Date Range Picker Package

Range Picker package can be installed using the following command:

npm i ng-material-date-range-picker

Registering Ng Material Date Range Picker Module

Import the 2 view Date Range Picker module into your Angular application (src/app/app.module.ts):

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgDatePickerModule } from 'ng-material-date-range-picker';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgDatePickerModule,  CommonModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Ng Date Range Picker Component

Modify the template in src/app/app.component.ts to render the 2 view Date Range Picker component:

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `<ng-date-range-picker></ng-date-range-picker>`
})
export class AppComponent {
  title = 'ng-date-range-picker-test';
}

Running the Application

After completing the required configuration, run the following command:

ng serve

This will display the Date Range Picker in your default browser.

Features

• Allow to select date range with two views.
• Predefined date support with list items.
• User can modify predefined date list.
• Provides complete controls on predefined date action items.

API Reference

Properties:

Name	Type	Description
selectedDates	DateRange<Date>	optional. default selection of start and end date
dateFormat	string	optional. default is 'dd/MM/yyyy'
dateDropDownOptions	ISelectDateOption[]	optional. Addition options to predefined date action list.

Events

Name	Type	Description
onDateSelectionChanged	DateRange<Date>	Emits when date selection is changed.
dateListOptions	ISelectDateOption[]	Emits pre-defined date action list items for configuration purpose.

Example to configure predefined visibility of predefined date action list items:

import { Component } from '@angular/core';
import { ISelectDateOption } from 'ng-date-range-picker/lib/model/select-date-option';

@Component({
  selector: 'app-root',
  template:` <ng-date-range-picker (dateListOptions)="dateListOptions($event)"></ng-date-range-picker>`
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'ng-date-range-picker-test';

  dateListOptions(optionList: ISelectDateOption[]) {
    optionList[0].isSelected = true;
    optionList[1].isVisible = false;
  }
}

In Above example first item of action list is selected and second option is hidden.

Demo's

Demo 1

Demo 2

Playground

Stackblitz