Ngx mat Date Time picker In Angular

In this article we will learn how to choose date and time using ngx material.

Let’s start :

Step 1 :  install Ngx-mat in your angular application

npm install –save ngx-mat-datetime-pick@3.x

Step 2 :  After Installing the ngx-mat now import the ngx-mat in app.module.ts.

app.module.ts

import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgxMatDatetimePickerModule, NgxMatTimepickerModule, NgxMatNativeDateModule } from '@angular-material-components/datetime-picker';
import { NgxMatMomentModule } from '@angular-material-components/moment-adapter';
import { AppComponent } from './app.component';

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      HttpClientModule,
      BrowserAnimationsModule,
      MatDatepickerModule,
      MatInputModule,
      NgxMatDatetimePickerModule,
      NgxMatTimepickerModule,
      FormsModule,
      ReactiveFormsModule,
      MatButtonModule,
      NgxMatMomentModule,
      MatRadioModule,
      MatSelectModule,
      MatCheckboxModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

Step 3 : app.component.html

<div class="page">
  <h3>DEMO</h3>

  <table class="table">
    <thead>
      <tr>
        <th><strong>ngx-mat-datetime-picker</strong></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <mat-form-field>
            <input
              matInput
              [ngxMatDatetimePicker]="picker"
              placeholder="Choose a date"
              [formControl]="dateControl"
              [min]="minDate"
              [max]="maxDate"
              [disabled]="disabled"
            />
            <mat-datepicker-toggle
              matSuffix
              [for]="picker"
            ></mat-datepicker-toggle>
            <ngx-mat-datetime-picker
              #picker
              [showSpinners]="showSpinners"
              [showSeconds]="showSeconds"
              [stepHour]="stepHour"
              [stepMinute]="stepMinute"
              [stepSecond]="stepSecond"
              [touchUi]="touchUi"
              [color]="color"
              [enableMeridian]="enableMeridian"
            >
            </ngx-mat-datetime-picker>
          </mat-form-field>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Step 4 : app.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, NgZone, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import * as moment from 'moment';
import { ThemePalette } from '@angular/material/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  @ViewChild('picker') picker: any;

  public date: moment.Moment;
  public disabled = false;
  public showSpinners = true;
  public showSeconds = false;
  public touchUi = false;
  public enableMeridian = false;
  public minDate: moment.Moment;
  public maxDate: moment.Moment;
  public stepHour = 1;
  public stepMinute = 1;
  public stepSecond = 1;
  public color: ThemePalette = 'primary';

  public formGroup = new FormGroup({
    date: new FormControl(null, [Validators.required]),
    date2: new FormControl(null, [Validators.required])
  })
  public dateControl = new FormControl(new Date(2021,9,4,5,6,7));
  public dateControlMinMax = new FormControl(new Date());

  public options = [
    { value: true, label: 'True' },
    { value: false, label: 'False' }
  ];

  public listColors = ['primary', 'accent', 'warn'];

  public stepHours = [1, 2, 3, 4, 5];
  public stepMinutes = [1, 5, 10, 15, 20, 25];
  public stepSeconds = [1, 5, 10, 15, 20, 25];

  public codeDatePicker = `
<mat-form-field>
  <input matInput [ngxMatDatetimePicker]="picker" 
                  placeholder="Choose a date" 
                  [formControl]="dateControl"
                  [min]="minDate" [max]="maxDate" 
                  [disabled]="disabled">
  <mat-datepicker-toggle matSuffix [for]="picker">
  </mat-datepicker-toggle>
  <ngx-mat-datetime-picker #picker 
    [showSpinners]="showSpinners" 
    [showSeconds]="showSeconds"
    [stepHour]="stepHour" [stepMinute]="stepMinute" 
    [stepSecond]="stepSecond"
    [touchUi]="touchUi"
    [color]="color">
  </ngx-mat-datetime-picker>
</mat-form-field>`;

  public codeTimePicker = `
<ngx-mat-timepicker 
            [(ngModel)]="date" [disabled]="disabled" 
            [showSpinners]="showSpinners"
            [stepHour]="stepHour" [stepMinute]="stepMinute" 
            [stepSecond]="stepSecond" 
            [showSeconds]="showSeconds">
</ngx-mat-timepicker>`;


  public codeFormGroup = `
  <div [formGroup]="formGroup">
    <mat-form-field>
      <input matInput [ngxMatDatetimePicker]="picker1" 
      placeholder="Choose a date" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
      <ngx-mat-datetime-picker #picker1></ngx-mat-datetime-picker>
    </mat-form-field>
  </div>`;

  public code1 = `formGroup.get('date').value?.toLocaleString()`;

  public codeFormGroup2 = `
  <form [formGroup]="formGroup">
    <ngx-mat-timepicker formControlName="date2"></ngx-mat-timepicker>
  </form>`;

  public code2 = `formGroup.get('date2').value?.toLocaleString()`;

  constructor(private http: HttpClient, private zone: NgZone) {
  }

  ngOnInit() {
    this.date = new Date(2021,9,4,5,6,7);
  }

  toggleMinDate(evt: any) {
    if (evt.checked) {
      this._setMinDate();
    } else {
      this.minDate = null;
    }
  }

  toggleMaxDate(evt: any) {
    if (evt.checked) {
      this._setMaxDate();
    } else {
      this.maxDate = null;
    }
  }

  closePicker() {
    this.picker.cancel();
  }

  private _setMinDate() {
    const now = new Date();
    this.minDate = new Date();
    this.minDate.setDate(now.getDate() - 1);
  }


  private _setMaxDate() {
    const now = new Date();
    this.maxDate = new Date();
    this.maxDate.setDate(now.getDate() + 1);
  }

}

Step 5 : Now run your angular application using the below command.