Angular Material Datepicker : Set Value
July 10, 2020
This page will walk through Angular Material Datepicker set value example. The Datepicker with MatNativeDateModule
, uses native JavaScript Date
API. The Datepicker with MatMomentDateModule
, uses moment.js
API.
Here on this page we will provide code to set date to Datepicker with native
Date
and moment
using reactive form.
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
Set Date with Moment
When we create our Datepicker usingMatMomentDateModule
then to set the date, we need to use moment
.
Import the
moment
.
import * as _moment from 'moment'; const moment = _moment;
Suppose we have a
FormControl
. We can pass moment
as following.
releaseDate = new FormControl(moment("10-20-2020", "MM-DD-YYYY"));
releaseDate
with Datepicker.
<mat-form-field> <mat-label>Release Date</mat-label> <input matInput [matDatepicker]="relDob" [formControl]="releaseDate"> <mat-datepicker-toggle matSuffix [for]="relDob"></mat-datepicker-toggle> <mat-datepicker #relDob></mat-datepicker> </mat-form-field>
FormGroup
.
setDefaultDate() { this.studentForm.patchValue({ dateOfBirth: moment("12/25/1995", "MM/DD/YYYY"), admDateRange: { startDate: moment("June 01, 2020", "MMM DD,YYYY"), endDate: moment("July 31, 2020", "MMM DD,YYYY") } }); }
setDefaultDate()
inside ngOnInit()
or button click or using other events to set default date.
We can set
moment
in following ways.
1.
moment()
2.
moment("10-25-1995", "MM-DD-YYYY")
3.
moment("2018-10-25 6:30 +0000", "YYYY-MM-DD HH:mm Z")
4.
moment([2018, 5, 14, 15, 25, 50, 525])
moment
can be instantiated using array with given format.
[year, month, day, hour, minute, second, millisecond]
moment([2018, 5, 20])
Set Date with Native JavaScript Date
To create Datepicker with native JavaScriptDate
we need to import MatNativeDateModule
in our application module.
To set date with native JavaScript
Date
, we can pass the Date
to our FormControl
.
releaseDate = new FormControl(new Date(2020, 9, 20));
Date
with FormGroup
.
setDefaultDate() { this.studentForm.patchValue({ dateOfBirth: new Date(1995, 11, 25), admDateRange: { startDate: new Date(2020, 5, 1), endDate: new Date(2020, 6, 31) } }); }
Complete Example
Find the complete code of our demo application to set value to Datepicker usingmoment.js
.
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: '', admDateRange: this.formBuilder.group({ startDate: '', endDate: '' }) }); onFormSubmit() { this.studentService.saveStudent(this.studentForm.value); let dateOfBirth: Moment = this.studentForm.get('dateOfBirth').value; console.log(dateOfBirth.toObject()); let yearOfBirth = dateOfBirth.toObject().years; console.log('yearOfBirth : ', yearOfBirth); this.studentForm.reset(); } setDefaultDate() { this.studentForm.patchValue({ dateOfBirth: moment("12/25/1995", "MM/DD/YYYY"), admDateRange: { startDate: moment("June 01, 2020", "MMM DD,YYYY"), endDate: moment("July 31, 2020", "MMM DD,YYYY") } }); } }
<h3>Datepicker Set Value</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" 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>Admission Date Range</mat-label> <mat-date-range-input [rangePicker]="admDateRangePicker" formGroupName="admDateRange"> <input matStartDate formControlName="startDate" placeholder="Start date"> <input matEndDate formControlName="endDate" placeholder="End date"> </mat-date-range-input> <mat-datepicker-toggle matSuffix [for]="admDateRangePicker"></mat-datepicker-toggle> <mat-date-range-picker #admDateRangePicker></mat-date-range-picker> </mat-form-field> <br/><br/> <button mat-raised-button>Submit</button> <button mat-raised-button type="button" (click)="setDefaultDate()">Set Default Dates</button> </form>
import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class StudentService { saveStudent(student) { console.log(JSON.stringify(student)); } }
import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <app-student></app-student> ` }) export class AppComponent { }
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. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output after clicking Set Default Dates button.

References
DatepickerMoment.js Documentation