Datepicker In Angular Using Ignite-ui-angular

Starting from the selection of a date of birth, booking an event, scheduling an appointment, or entering a data field, date and time fields are a common part of modern Web and mobile applications. Not only does the datetime data entry need to be simple and easy to understand but also should look modern and responsive.

Infragistics’s Ignite UI provides a modern datepicker control that is not only modern and responsive but also provides simple and easy navigation and selection. The control is also responsive to any device of any size.

In this article, we will learn how to create a web app that demonstrates the use of Ignite UI datepicker control.

This article covers the following topics,

1. Install Ignite UI for Angular
2. Create an Angular Project with Ignite UI
3. Import IgxDatePickerModule
4. Add igx-datepicker
5. Set default date in datepicker
6. Adding cancel and today button
7. Custom formatting
8. Internationalization
9. Conclusion

Introduction

The Ignite UI for Angular datepicker component displays a month-view calendar or a pop-up calendar that lets users pick a single date. It supports locales and custom date formatting. The component can also display today's calendar format.

If you already have Ignite UI installed, you can skip this step.

Step 1 - Install Ignite UI for Angular

You should have node and npm installed on your machine. If you are new to npm, check out the npm documentation here.

Open the command prompt and run

“npm install -g igniteui-cli”

Create an Angular project with Ignite UI

To create a new project run the below command:

“ng new igniteui-date-picker-demo”

To get into the project:

“cdigniteui-date-picker-demo”

Now, it’s time to install the Ignite UI for this project. Run the following command:

“npm install igniteui-angular”

Let’s add the required Ignite UI styles and the “HammerJs” library in the angular-cli.json.

Open the “angular.json” and add below code snippet as shown Listing 1.

"styles": [
"../node_modules/igniteui-angular/styles/igniteui-angular.css"
]
"scripts": ["../node_modules/hammerjs/hammer.min.js"]

Listing 1.

Now, we have configured Ignite UI with our Angular project successfully.

Adding Material Icons

/* style.css */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

Run the following command on command prompt to run the Angular application.

ng serve --open

The application will run using the following address and port “http://localhost:4200”

Step 2 - Import the IgxDatePickerModule

Open the “app.module.ts” file and import the IgxDatePickerModule in the import section of @NgModule

import {
    IgxDatePickerModule
} from 'igniteui-angular';
@NgModule({
    imports: [
        IgxDatePickerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {}

Listing 2.

Step 3 - Add a page

Let’s add the new component named date-picker-page to do that run the below command on command prompt.

ng generate component components/date-picker-page

Listing 3.

 
Figure 1.

Now, add the <app-date-picker-page></app-date-picker-page> in app.component.html file.

Step 4 - Add a DatePicker control

Let’s add an igx-datePicker directive in “date-picker-page.component.html” page as shown in listing 4. This is the datepicker control that allows users to pick a date.

<igx-datePicker></igx-datePicker>

Listing 4.

Now run your application using “ng server --open”.

The result will look like the following where you will see a datepicker control is launched with today’s date selected in the current month. Here, you can select any date from the month.

 
Figure 2.

Set default date in DatePicker

Let’s add the default value of DatePicker control.

Open the “date-picker-page.component.ts” and add the following line as shown highlighted in Listing 6. What this does is, sets the date of the calendar to today’s date.

import {
    Component,
    OnInit
} from '@angular/core';
@Component({
    selector: 'app-date-picker-page',
    templateUrl: './date-picker-page.component.html',
    styleUrls: ['./date-picker-page.component.css']
})
export class DatePickerPageComponent implements OnInit {
    public date: Date = new Date(Date.now());
    constructor() {}
    ngOnInit() {}
}

Listing 6.

Now open the date-picker-page.component.html and add the following HTML for icon.

<igx-datePicker id="date-picker" [value]="date"></igx-datePicker>

Listing 7.

Now, run the application to view the output. As you can see, the current date is selected and shown in the Date text box.

 
Figure 3.

 

 
Figure 4.

Enable cancel and today buttons

You can enable Cancel and Today buttons by setting these properties of datepicker control. Let’s add the cancelButtonLabel and todayButtonLabel properties of datepicker. See Listing 7.

<igx-datePicker cancelButtonLabel="cancel" todayButtonLabel="today" [value]="date">
</igx-datePicker>

Listing 7.

Now, run the application to view the output. As you can see from the following output, the CANCEL and TODAY buttons are added and enabled in the control.

 
Figure 5.

The CANCEL button cancels the action. TODAY button selects today’s date in the calendar.

Custom formatting

You can also use custom formatting in the datepicker control and format a date the way you prefer. The following code snippet formats a date into a more readable format.

export class DatePickerPageComponent implements OnInit {
    public date: Date = new Date(Date.now());
    private dayFormatter = new Intl.DateTimeFormat('en', {
        weekday: 'long'
    });
    private monthFormatter = new Intl.DateTimeFormat('en', {
        month: 'long'
    });
    public formatter = (date: Date) => {
        return `You selected ${this.dayFormatter.format(date)}, ${date.getDate()}   ${this.monthFormatter.format(date)}, ${date.getFullYear()}`;
    }
    constructor() {}
    ngOnInit() {}
}
<igx-datePicker id="date-picker" [value]="date" [formatter]="formatter"></igx-datePicker>

Listing 8.

 
Figure 6.

Internationalization

The IgxDatePickerComponent supports locales. You can set them using the locale input. The following code snippet sets control’s local to hi-IN.

locale="hi-IN"

<igx-datePicker locale="hi-IN" [value]="date">
</igx-datePicker>

Listing 9.

As you can see from the following output, the calendar and dates are now in the local Indian language, Hindi.

 
Figure 7.

The IgxCalendarComponent allows custom templates for the header (igxCalendarHeader). You can also customize the subheader; i.e. ,(igxCalendarSubheader), using this you can change the look and feel of header and subheader.

<igx-datePicker locale="ja-JP" [value]="date">
    <ng-template igxCalendarHeader let-format>
        {{ format.month.combined |  titlecase }}{{format.day.combined }}{{ format.weekday.combined }}
    </ng-template>
    <ng-template igxCalendarSubheader let-format>
        <span class="date__el" (click)="format.yearView()">{{ format.year.combined }}</span>
        <span class="date__el" (click)="format.monthView()">{{ format.month.combined |    titlecase }}</span>
    </ng-template>
</igx-datePicker>

Listing 10.

Conclusion

Ignite UI’s DatePicker control allows Web developers to implement a custom and modern date picker functionality in their web pages. In this article, we saw how to add a datepicker, sand et its custom properties and formatting. The control is responsive and works flawlessly on any device of any size.

Learn more, download a free trial, and get started here,

• Get Started with Ignite UI for angular.
• Download the code here.