npm i ngx-material-timepicker
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import { NgModule } from '@angular/core'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { BrowserModule } from '@angular/platform-browser'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatInputModule } from '@angular/material/input'; import { MatMenuModule } from '@angular/material/menu'; import { MatSelectModule } from '@angular/material/select'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { NgxMatTimepickerModule } from 'ngx-mat-timepicker'; import { AppComponent } from './app.component'; import { LOCALE_ID } from '@angular/core'; const lang = 'en-US'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, CommonModule, FormsModule, ReactiveFormsModule, MatButtonModule, MatCardModule, MatFormFieldModule, MatInputModule, MatIconModule, MatMenuModule, MatSelectModule, MatToolbarModule, MatTooltipModule, NgxMatTimepickerModule.setLocale(lang), ], providers: [{ provide: LOCALE_ID, useValue: lang }], declarations: [AppComponent], bootstrap: [AppComponent], }) export class AppModule {} |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import { Component, ViewChild } from '@angular/core'; import { FormControl } from '@angular/forms'; import { DateTime } from 'ts-luxon'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], }) export class AppComponent { formControlItem: FormControl = new FormControl(''); maxTime: DateTime = DateTime.local().set({ hour: 16, }); minTime: DateTime = DateTime.local().set({ hour: 14, }); required: boolean = !1; @ViewChild('timepicker') timepicker: any; /** * Lets the user click on the icon in the input. */ openFromIcon(timepicker: { open: () => void }) { if (!this.formControlItem.disabled) { timepicker.open(); } } /** * Function to clear FormControl's value, called from the HTML template using the clear button * * @param $event - The Event's data object */ onClear($event: Event) { this.formControlItem.setValue(null); } } |
app.component.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<mat-form-field appearance="outline"> <mat-label>MY FIELD</mat-label> <input type="text" matInput [ngxMatTimepicker]="timepicker" [format]="24" [required]="required" readonly [formControl]="formControlItem" /> <mat-icon matPrefix *ngIf="formControlItem.value && !formControlItem.disabled && !required" (click)="onClear($event)" > close </mat-icon> <mat-icon matSuffix *ngIf="!formControlItem.disabled" (click)="openFromIcon(timepicker)" >schedule</mat-icon > </mat-form-field> <ngx-mat-timepicker #timepicker [enableKeyboardInput]="true" [max]="maxTime" [min]="minTime" ></ngx-mat-timepicker> |
FULL SOURCE CODE
