Angular Material Datepicker Change Event

By Arvind Rai, July 15, 2020
Angular Angular Material
This page will walk through Angular Material Datepicker change event example. Angular Material provides (dateChange) event for Datepicker that triggers when user change date by manual entry in input text or select date from calendar. The dateChange event is bound to Datepicker input text. The native change event triggers only when user change date by manual entry but not for date selection from calendar. It means if we select date from calendar, then native change event will not trigger. The dateChange event will trigger for both cases, manual entry in input box as well as selecting date from calendar.
For input event, Angular Material provides (dateInput) event for Datepicker. The dateInput triggers when user enters date manually in input box as well as selecting date from calendar. The dateInput event is bound to Datepicker input text. The native input event will trigger only when user enters date in input text manually but not for date selection from calendar.
On this page we will provide complete example to use (dateChange) and dateInput events in a Datepicker.
Contents

Technologies Used

Find the technologies being used in our example.
1. Angular 10.0.0
2. Angular Material 10.0.0
3. Node.js 12.5.0
4. NPM 6.9.0
5. moment.js 2.27.0

Using (dateChange) Event

The (dateChange) is the change event to trigger when we change date manually in input box or select date from calendar. The dateChange is used in Datepicker input text as following. 
<mat-form-field appearance="fill">
  <mat-label>Date of Birth</mat-label>
  <input matInput [matDatepicker]="dob" (dateChange)="handleDOBChange($event)" formControlName="dateOfBirth">
  <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
  <mat-datepicker #dob></mat-datepicker>
</mat-form-field>
We have created handleDOBChange() method in our component. On date change, the handleDOBChange() will execute. Find its code. 
handleDOBChange(event) {
  const m: Moment = event.value;
  if(m){
    console.log("Date of Birth: " + m.toDate());
  }
}

Using (dateInput) Event

The (dateInput) is the input event to trigger when we enter date in input box manually or select date from calendar. The dateInput is used in Datepicker input box as following. 
<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="dtOfAdm" (dateInput)="handleAdmDateChange($event)" formControlName="dateOfBirth">
  ------
</mat-form-field>
We have created handleAdmDateChange() method in our component as following. 
handleAdmDateChange(event) {
  const m: Moment = event.value;
  if(m){
    console.log("Date of Admission: " + m.toDate());
  }
}

Using Native (change) and (input) Event

The native (change) and (input) events of input text will trigger only on manual entry date change and not in calendar date selection.
To record only manual date entry by native change event, we can use it in our Datepicker as following. 
<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="dtOfAdm" (change)="handleAdmDateChange()" formControlName="dateOfAdmission">
  ------
</mat-form-field>
Find the component code snippet. 
handleAdmDateChange() {
  const dateOfAdmission: Moment = this.studentForm.get('dateOfAdmission').value;
  console.log(dateOfAdmission.toDate());
}

To record only manual date entry by native input event, we can use it in our Datepicker as following. 
<mat-form-field appearance="fill">
  <input matInput [matDatepicker]="dtOfAdm" (input)="handleAdmDateChange()" formControlName="dateOfAdmission">
  ------
</mat-form-field>

Complete Example

Here we will provide complete code of our demo application with moment.js.
student.component.html 
<h3>Datepicker (dateChange) and (dateInput) Events</h3>
<form [formGroup]="studentForm" (ngSubmit)="onFormSubmit()">
  <mat-form-field>
    <mat-label>Student Name</mat-label>
    <input matInput formControlName="name">
  </mat-form-field>
  <br/>
  <mat-form-field appearance="fill">
    <mat-label>Date of Birth</mat-label>
    <input matInput [matDatepicker]="dob" (dateChange)="handleDOBChange($event)" formControlName="dateOfBirth">
    <mat-datepicker-toggle matSuffix [for]="dob"></mat-datepicker-toggle>
    <mat-datepicker #dob></mat-datepicker>
  </mat-form-field>
  <br/>
  <mat-form-field appearance="fill">
    <mat-label>Date of Admission</mat-label>
    <input matInput [matDatepicker]="dtOfAdm" (dateInput)="handleAdmDateChange($event)" formControlName="dateOfAdmission">
    <mat-datepicker-toggle matSuffix [for]="dtOfAdm"></mat-datepicker-toggle>
    <mat-datepicker #dtOfAdm></mat-datepicker>
  </mat-form-field>  
  <br/><br/>
  <button mat-raised-button>Submit</button>
</form>
student.component.ts 
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl } from '@angular/forms';
import { StudentService } from './student.service';
import * as _moment from 'moment';
import { Moment } from 'moment';

const moment = _moment;

@Component({
  selector: 'app-student',
  templateUrl: './student.component.html'
})
export class StudentComponent implements OnInit {
  constructor(private formBuilder: FormBuilder, private studentService: StudentService) { }
  ngOnInit() {
  }
  studentForm = this.formBuilder.group({
    name: '',
    dateOfBirth: '',
    dateOfAdmission: ''
  });
  onFormSubmit() {
    this.studentService.saveStudent(this.studentForm.value);
    this.studentForm.reset();
  }
  handleDOBChange(event) {
    const m: Moment = event.value;
    if(m){
      console.log("Date of Birth: " + m.toDate());
    }
    //------------
    const dateOfBirth: Moment = this.studentForm.get('dateOfBirth').value;
    console.log(dateOfBirth.toDate());
  }
  handleAdmDateChange(event) {
    const m: Moment = event.value;
    if(m){
      console.log("Date of Admission: " + m.toDate());
    }
    //------------
    const dateOfAdmission: Moment = this.studentForm.get('dateOfAdmission').value;
    console.log(dateOfAdmission.toDate());
  }
}
student.service.ts 
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class StudentService {
  saveStudent(student) {
    console.log(JSON.stringify(student));
  }
}
app.component.ts 
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
      <app-student></app-student>
  `
})
export class AppComponent {
}
app.module.ts 
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule }    from '@angular/forms'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatMomentDateModule } from '@angular/material-moment-adapter';

import { AppComponent } from './app.component';
import { StudentComponent } from './student.component';

@NgModule({
  declarations: [
    AppComponent,
    StudentComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatInputModule, 
    MatDatepickerModule,
    MatMomentDateModule
  ],
  providers: [
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Install moment.js. 
npm install moment --save
4. Download source code using download link given below on this page.
5. Use downloaded src in your Angular CLI application.
6. Run ng serve using command prompt.
7. Access the URL http://localhost:4200
Find the print screen of the output.
Angular Material Datepicker Change Event

References

Datepicker
Moment.js Documentation

Download Source Code

angular-material-datepicker-change-event.zip
POSTED BY
ARVIND RAI
ARVIND RAI
Popular Tutorials: Java 8 | Spring 5 | Angular | Android
RELATED POST










©2023 concretepage.com | Privacy Policy | Contact Us