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>
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>
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>
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 modifiedshowSpinners: If true, the spinners above and below input are visibleshowSeconds: If true, it is not possible to select secondsdisableMinute: If true, the minute is read-onlydefaultTime: An array [hour, minute, second] for default time when the date is not yet definedstepHour: The number of hours to add/subtract when clicking hour spinnersstepMinute: The number of minutes to add/subtract when clicking minute spinnersstepSecond: The number of seconds to add/subtract when clicking second spinnerscolor: Color palette to use on the date picker calendarenableMeridian: Whether to display 12H or 24H modehideTime: If true, the time is hiddentouchUi: 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 {;} ????
3