Angular 9|8|7 Material Inline MatCalender/ Datepicker Tutorial by Example

We have already discussed how to use Material UI framework in Angular project and how to use Datepicker component in a view.

But sometimes we may need to show Datepicker inline in a view so that it will be always visible to the user for selections.

In this tutorial, we will go through steps to demonstrate how to use Calendar inline in component with available options like:

• Set Max Date
• Set Min Date
• Filter some of the dates; Disable Sundays and Saturdays in Inline MatCalender
• Start At property
• Event trigger control on date selected.

First, let’s go through steps to create a new Angular project and install Angular Material.

You can jump to Calendar Implementation here.

Create a new Angular Project

As now we have NG CLI tool install, we can easily create a new Angular project by running following command in CLI

$ ng new HeyAngularMaterial

After running above command it will ask if you want Routing in the project? and also about CSS style formats you want to opt for the project.

Install Angular Material

To install Angular Material in Angular project run following npm CLI command to install Material, CDK and Animation packages.

$ npm install --save @angular/material @angular/cdk @angular/animations

Enable Animation for Material Components

Animations like smooth scrolling effect, ripple effect on button click need to be enabled or disabled by importing following modules.

In the app.module.ts file make the following changes:

 

Enable Animations:

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})

Disable Animations:

import {NoopAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [NoopAnimationsModule],
  ...
})

Add Material Theme

Components used in the project are styles using CSS available in the material CSS theme file, so just add the following theme file link in styles.css available at the project root.

@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
/* @import "~@angular/material/prebuilt-themes/indigo-pink.css"; */
/* @import "~@angular/material/prebuilt-themes/pink-bluegrey.css"; */
/* @import "~@angular/material/prebuilt-themes/purple-green.css"; */</pre>
you can use any one of these available themes.

That's it ... we are done with Angular material configuration.
<h2></h2>
<h2>Add Inline Material Datepicker Calendar</h2>
For using an Angular Material UI component, we need to import its API in the app's main module.

Here we will import the following modules:

<code>MatDatepickerModule and MatNativeDateModule are required modules to show Inline datepicker.

MatGridListModule(optional) here we used this module to use Grid structure and align out Datepicker better in view

After importing these modules, the app.module.ts file will look like this:
// app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { 
  MatDatepickerModule, 
  MatNativeDateModule, 
  MatGridListModule
} from '@angular/material';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatDatepickerModule,
    MatNativeDateModule,
    MatGridListModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
</pre>
Now to show Inline Datepicker Calender we will use <code>mat-calendar component with following option properties:

Input Properties:
<strong>selected</strong>: Set selected/ highlighted date in calendar datepicker.

<strong>startAt</strong>: Date from which calender view will start.

<strong>minDate</strong>: Set Minimum date in calendar datepicker.

<strong>maxDate</strong>: Set Maximum date in calendar datepicker.

<strong>dateFilter</strong>: Filter method used to enable or disable dates. ie disable Saturdays and Sundays in the calendar view.

Output Properties:
selectedChange: Event-triggered when a date is selected by the user.

In the app.component.html file place following code:
<mat-grid-list cols="4">
    <mat-grid-tile></mat-grid-tile>
    <mat-grid-tile>

        <mat-calendar 
        [selected]="selectedDate" 
        [startAt]="startAt"
        [minDate]="minDate" 
        [maxDate]="maxDate" 
        [dateFilter]="myDateFilter"
        (selectedChange)="onSelect($event)">
        </mat-calendar>

    </mat-grid-tile>
    <mat-grid-tile>

        <p class="cal_date">{{DayAndDate}}, {{year}}</p>

    </mat-grid-tile>
    <mat-grid-tile></mat-grid-tile>
</mat-grid-list></pre>
In the <strong>app.component.ts</strong> file add following code with property bindings, filter, and method:
<pre class="wp-block-prismatic-blocks"><code class="language-javascript">// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-calendar-demo';
  selectedDate = new Date('2019/09/26');
  startAt = new Date('2019/09/11');
  minDate = new Date('2019/09/14');
  maxDate = new Date(new Date().setMonth(new Date().getMonth() + 1));
  year: any;
  DayAndDate: string;

  constructor(){
    this.onSelect(this.selectedDate);
  }

  onSelect(event) {
    console.log(event);
    this.selectedDate = event;
    const dateString = event.toDateString();
    const dateValue = dateString.split(' ');
    this.year = dateValue[3];
    this.DayAndDate = dateValue[0] + ',' + ' ' + dateValue[1] + ' ' + dateValue[2];
  }

  myDateFilter = (d: Date): boolean => {
    const day = d.getDay();
    // Prevent Saturday and Sunday from being selected.
    return day !== 0 && day !== 6 ;
  }
}

It will look like this:








Category: Angular