How To Implement Material Datepicker and Timepicker In Angular

In this blog we will learn how to get Date and Time values from users using the Material Date and Time picker in the Angular application. This Angular post is compatible with Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 & Angular 12.

Most of the Angular projects prefer the Material UI library due to its compatibility and ease of usage. But Material doesn’t provide any component, that can be simply integrated to fetch Time values similarly.

We’re going to discuss how to easily add a small npm package to add Datepickers with Integrated Timepicker for user selections.

Let’s Start,

1. Create a New Angular Application

Run the following ng command to create a new Angular project

$ ng new angular-material-datetime-picker
# ? Would you like to add Angular routing? No
# ? Which stylesheet format would you like to use? SCSS

Enter the project directory

$ cd angular-material-datetime-picker

Run the application

$ ng -o serve

2. Install Material Package

After creating the Angular project, install the Material UI library by hitting the following ng command

$ ng add @angular/material
? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink      
? Set up global Angular Material typography styles? No  
? Set up browser animations for Angular Material? Yes

3. Install Material Datepicker & Timepicker Package

Now install another package to add the Timepicker feature inside the default Datepicker provided by the Material UI component.

Run the following command to install the @angular-material-components/datetime-picker in the Angular project.

$ npm install @angular-material-components/datetime-picker

4. Update App Module

For using the Datepicker with Time selection, we need to import Material’s default MatDatepickerModule and MatInputModule modules.

Other than these also import the FormsModule and ReactiveFormsModule to use the Date & Time picker in forms.

After that, we’ll import the NgxMatDatetimePickerModule, NgxMatTimepickerModule , and NgxMatNativeDateModule to upgrade the default Datepicker with Time selection.

Finally, the app.module.ts file will look like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';

import {
  NgxMatDatetimePickerModule,
  NgxMatNativeDateModule,
  NgxMatTimepickerModule
} from '@angular-material-components/datetime-picker';

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

5.Using Datepicker with Time Selection

The @angular-material-components/datetime-picker package provides components to add Datepicker with Time selection capabilities.

To create a Date and Time picker in Material, add the ngx-mat-datetime-picker component instead of mat-datepicke shown below:

<mat-form-field>
    <input matInput [ngxMatDatetimePicker]="picker" placeholder="Choose a date & time" [(ngModel)]="myDatePicker">
    
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>

    <ngx-mat-datetime-picker #picker></ngx-mat-datetime-picker>
</mat-form-field>

This will create a default Date and Time picker component with 24 Hours as shown below:

 

 

6. Only Show Timepicker

To show only the Time selection, we add ngx-mat-timepicker a component

<ngx-mat-timepicker [(ngModel)]="myTimePicker">
  </ngx-mat-timepicker>

myTimePicker

 

7. Change Time Format 24 Hrs to 12 Hrs with AM/ PM Selection

The enableMeridian property can be set to true to display AM/ PM selection to make time selection more human-friendly.

<ngx-mat-datetime-picker #picker [enableMeridian]="true"></ngx-mat-datetime-picker>

Angular-Material-Datepicker-Timepicker_3

8. Date & Time Range Selection

The [min] and [max] properties can be used for validation in Date & Time selection. Here we have From and To Date selection where To date can’t be less than From.

<mat-form-field>
    <input matInput [ngxMatDatetimePicker]="pickerFrom" placeholder="From date & time" [(ngModel)]="myDatePickerFrom">

    <mat-datepicker-toggle matSuffix [for]="pickerFrom"></mat-datepicker-toggle>

    <ngx-mat-datetime-picker #pickerFrom [enableMeridian]="true"></ngx-mat-datetime-picker>
</mat-form-field>

<mat-form-field>
    <input matInput [ngxMatDatetimePicker]="pickerTo" placeholder="To date & time" [(ngModel)]="myDatePickerTo"
      [min]="myDatePickerFrom">

    <mat-datepicker-toggle matSuffix [for]="pickerTo"></mat-datepicker-toggle>

    <ngx-mat-datetime-picker #pickerTo [enableMeridian]="true"></ngx-mat-datetime-picker>
</mat-form-field>

Angular-Material-Datepicker-Timepicker_4

9. Change Date & Time Format using Moment Adapter

We can change date formats by using Moment library adapters due to more supported features and flexibility.

To modify the Date and Time formats, follow these steps to incorporate the Moment date adapter.

Step 1: Install the Moment Adapter package

Run the following npm command to install the adapter package

$ npm install --save  @angular-material-components/moment-adapter

Step 2: Update the App Module

Add custom date format then update the providers array as shown:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';

import {
  NgxMatDateFormats,
  NgxMatDatetimePickerModule,
  NgxMatNativeDateModule,
  NgxMatTimepickerModule,
  NGX_MAT_DATE_FORMATS
} from '@angular-material-components/datetime-picker';

const CUSTOM_DATE_FORMATS: NgxMatDateFormats = {
  parse: {
    dateInput: "l, LTS"
  },
  display: {
    dateInput: "l, LTS",
    monthYearLabel: "MMM YYYY",
    dateA11yLabel: "LL",
    monthYearA11yLabel: "MMMM YYYY"
  }
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatDatepickerModule,
    MatInputModule,
    NgxMatDatetimePickerModule,
    NgxMatTimepickerModule,
    NgxMatNativeDateModule
  ],
  providers: [
    { provide: NGX_MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Other Useful Properties

The following are some other useful properties to customize date picker behavior:

  • disabled : If true, the picker is read-only and can’t be modified
  • showSpinners : If true, the spinners above and below input are visible
  • showSeconds : If true, it is not possible to select seconds
  • disableMinute : If true, the minute is read-only
  • defaultTime : An array [hour, minute, second] for default time when the date is not yet defined
  • stepHour : The number of hours to add/subtract when clicking hour spinners
  • stepMinute : The number of minutes to add/subtract when clicking minute spinners
  • stepSecond : The number of seconds to add/subtract when clicking second spinners
  • color : Color palette to use on the date picker calendar
  • enableMeridian : Whether to display 12H or 24H mode
  • hideTime : If true, the time is hidden
  • touchUi : Whether the calendar UI is in touch mode. In touch mode, the calendar opens in a dialog rather than a popup and elements have more padding to allow for bigger touch targets.

 

I hope you guys understand how I can do this. Let me know if you face any difficulties.

You can watch my previous blog here.

Happy Coding {;} 😎

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories