How To Add DateRange Picker In Angular Application

Introduction

In this article, we will learn how to add date range picker In Angular application.

Prerequisites

Let's create an Angular project by using the following command.

Open this project in Visual Studio Code and install bootstrap by using following command.

Now open styles.css file and add Bootstrap file reference. To add reference in styles.css file add this line.

Now install ngx-daterange library using the following command.

Now create a new component using the following command,

Now open sliderdemo.component.ts file and add the following code,

import { Component, OnInit, ViewChild } from '@angular/core';
import { DateRangePickerComponent, IDateRange, IDateRangePickerOptions } from 'ngx-daterange';
import * as moment from 'moment';
@Component({
selector: 'app-sliderdemo',
templateUrl: './sliderdemo.component.html',
styleUrls: ['./sliderdemo.component.css']
})
export class SliderdemoComponent implements OnInit {
constructor() { }
@ViewChild('dateRangePicker', { static: true })
dateRangePicker: DateRangePickerComponent;
firstFieldEmittedValue: IDateRange;
firstFieldOptions: IDateRangePickerOptions = {
format: 'MM/DD/YYYY',
minDate: moment().subtract(10, 'years'),
maxDate: moment().add(3, 'years'),
preDefinedRanges: [
{
name: 'Last Week',
value: {
start: moment().subtract(1, 'week').startOf('week'),
end: moment().subtract(1, 'week').endOf('week')
}
},
{
name: 'Two Weeks Ago',
value: {
start: moment().subtract(2, 'week').startOf('week'),
end: moment().subtract(2, 'week').endOf('week')
}
},
{
name: 'Three Weeks Ago',
value: {
start: moment().subtract(3, 'week').startOf('week'),
end: moment().subtract(3, 'week').endOf('week')
}
},
{
name: 'Last Month',
value: {
start: moment().subtract(1, 'month').startOf('month'),
end: moment().subtract(1, 'month').endOf('month')
}
},
]
}
secondFieldOptions: IDateRangePickerOptions = {
autoApply: false,
clickOutsideAllowed: false,
format: 'MM/DD/YYYY',
icons: 'font-awesome',
minDate: moment().subtract(10, 'years'),
maxDate: moment().add(1, 'year'),
}
ngOnInit(): void {
}
}

Now open sliderdemo.component.html file and add the following code,

Now open sliderdemo.component.css file and add the following css classes.

Now open app.module.ts file and add the following code,

Now open app.component.html file and add the following code,

Now, run the application using the 'npm start' command and check the result.

Select start date and end date

In this article, we learned how to add daterange picker In Angular application.