How to get started easily with Syncfusion Angular 9 DateRangePicker component?

A quick start project that helps you to create an Angular 9 DateRangePicker component with a minimal code configuration.

Angular 9 DateRangePicker

The following section explains the steps required to create a simple Angular 9 DateRangePicker component.

Pre-requisites

Make sure that you have the compatible versions of Angular in your machine before starting to work on this project.

• Node.js (latest version)
• Angular 9+
• Angular CLI
• TypeScript 3.7+
• Visual studio code for editor

Introduction

The Angular 9 DateRangePicker used in this project is created from the Syncfusion ej2-angular-calendars package. You can simply define it as <ejs-daterangepicker> within the template.

Dependencies

Before starting with this project, the Angular 9 DateRangePicker requires to add the Syncfusion ej2-angular-calendars package from npmjs, which are distributed in npm as @syncfusion scoped packages.

Creating Angular Project

To create the Angular project using the Angular CLI tool, follow the given steps.

Install Angular CLI 9 using following command.

npm install -g @angular/cli@9.0.2

Now, create a new Angular project by using the command ng new and navigate to that folder.

ng new <project name>
cd <project name>

Install the ej2-angular-calendars package through the npm install command.

npm install @syncfusion/ej2-angular-calendars --save

Adding Angular 9 DateRangePicker

You can add the Angular 9 DateRangePicker component by using ejs-daterangepicker directive and the attributes within the tag allows you to define other functionalities.

Import the DateRangePicker module into the Angular application (app.module.ts) from the ej2-angular-calendars package.

import { BrowserModule } from '@angular/platform-browser';
import { DateRangePickerModule } from '@syncfusion/ej2-angular-calendars';
import { AppComponent } from './app.component';
 
@NgModule({
    imports: [ BrowserModule,  DateRangePickerModule ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
 
export class AppModule {}

Define the Angular DateRangePicker code within the app.component.html file mapped against the templateUrl option in the app.component.ts file.

Here, the DateRangePicker component is rendered using the startDate and endDate properties.

[app.component.ts]

import {Component} from '@angular/core';
 
@Component ({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
 
export class AppComponent {
    public start: Date = new Date ("10/07/2017"); 
    public end: Date = new Date ("11/25/2017");
    constructor () {}
}

[app.component.html]

<ejs-daterangepicker id='daterangepicker' placeholder='Select a range' [startDate]='start' [endDate]='end'></ejs-daterangepicker>

Refer to the CDN link of CSS reference within the index.html file.

[index.html]

<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />

Run the application with the ng serve command, and the DateRangePicker will be displayed with start and end dates on the browser as shown below.

Screenshot