angular date time picker code example

Example 1: material datepicker

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Choose a date</mat-label>
  <input matInput [matDatepicker]="picker">
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>

Example 2: time picker angular

npm install --save ngx-material-timepicker
Next import the timepicker module into your app's module:

import {NgModule} from '@angular/core';
import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
 
@NgModule({
  imports: [NgxMaterialTimepickerModule]
})
export class MyModule {}
Finally connect the timepicker to an input via a template property:

<input [ngxTimepicker]="picker">
<ngx-material-timepicker #picker></ngx-material-timepicker>

Example 3: date time picker in angular material

<input mdc-datetime-picker="" date="true" time="true" type="text" id="datetime"
placeholder="Date" show-todays-date="" minutes="true" min-date="date" show-icon="true"
ng-model="dateTime" class=" dtp-no-msclear dtp-input md-input">

Tags:

Html Example