@alexfriesen/ngx-mat-timepicker
Github

Angular Material Timepicker

an Angular material 17+ extension to add time pickers!

npm versiondownloads per monthminified size
Star on Github

Install NgxMatTimepicker

  • npm i @alexfriesen/ngx-mat-timepicker

Dynamic locale (v >= 12.2.0)

en | it | es | fr

Picker with 12h format

using default palette (primary)

Example
                    
<mat-form-field>
    <input matInput
           name="selected_time_A"
           [(ngModel)]="selectedTimes.A"
           [ngxMatTimepicker]="pickerA"
           placeholder="4:00 PM"
           readonly />
    <mat-icon matSuffix
              (click)="pickerA.open()">
        watch_later
    </mat-icon>
</mat-form-field>
<ngx-mat-timepicker #pickerA></ngx-mat-timepicker>

Picker with 24h format

using accent palette

Example
                
<mat-form-field>
    <input matInput
           name="selected_time_B"
           format="24"
           [(ngModel)]="selectedTimes.B"
           [ngxMatTimepicker]="pickerB"
           placeholder="16:00"
           readonly />
    <mat-icon matSuffix
              (click)="pickerB.open()">
        watch_later
    </mat-icon>
</mat-form-field>
<ngx-mat-timepicker color="accent"
                    #pickerB></ngx-mat-timepicker>

ngx-mat-timepicker-field

using warn palette

Example

format = 12

:

format = 24

:
                    
<ngx-mat-timepicker-field color="warn"
                          [format]="12"
                          [defaultTime]="'11:11 PM'"></ngx-mat-timepicker-field>
 <ngx-mat-timepicker-field color="warn"
                           [format]="24"
                           [defaultTime]="'23:11'"></ngx-mat-timepicker-field>

Input with *ngIf

using *ngIf to show/hide only the input, but not the ngx-mat-timepicker

Before v 9.0.3, inputs weren't detached when destroyed, so you needed to destroy the ngx-mat-timepicker as well. Not anymore.

Example
ngx-mat-timepicker is here
                    
<mat-form-field *ngIf="showInput">
    <input matInput
    name="selected_time"
    [format]="24"
    [(ngModel)]="selectedTimes.C"
    [ngxMatTimepicker]="pickerC"
    placeholder="12:00"
    readonly />
    <mat-icon matSuffix
              (click)="pickerC.open()">
        watch_later
    </mat-icon>
</mat-form-field>
<button mat-raised-button
        (click)="showInput = !showInput"
        color="primary">
                        Destroy input
</button>
<div class="ngx-mtp-box-bordered">
    <small>ngx-mat-timepicker is here</small>
    <ngx-mat-timepicker color="accent"
                        #pickerC></ngx-mat-timepicker>
</div>

Append to input

using appendToInput

Example
ngx-mat-timepicker is here
                    
<mat-form-field>
    <input matInput
    [format]="24"
    [(ngModel)]="selectedTimes.D"
    [ngxMatTimepicker]="pickerD"
    placeholder="12:00"
    readonly />
    <mat-icon matSuffix
              (click)="pickerD.open()">
        watch_later
    </mat-icon>
</mat-form-field>
<div class="ngx-mtp-box-bordered">
    <small>ngx-mat-timepicker is here</small>
     <ngx-mat-timepicker color="accent"
                         appendToInput="true"
                         #pickerD></ngx-mat-timepicker>
</div>

Open programmatically

use external button to open the picker

Example
                    
<mat-form-field>
    <input matInput
    [format]="24"
    [(ngModel)]="selectedTimes.E"
    [ngxMatTimepicker]="pickerE"
    placeholder="12:00"
    readonly />
    <mat-icon matSuffix
              (click)="pickerE.open()">
        watch_later
    </mat-icon>
</mat-form-field>
<button mat-raised-button
		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
		(click)="pickerE.open()"
		color="primary">
    Open picker
</button>
 <ngx-mat-timepicker color="accent"
					 #pickerE></ngx-mat-timepicker>

ngx-mat-timepicker-toggle

use component in material stile (instead of using mat-icon + matSuffix)

Example
MM/DD/YYYY
                    
<mat-form-field>
    <input matInput
    [format]="24"
    [(ngModel)]="selectedTimes.F"
    [ngxMatTimepicker]="pickerF"
    placeholder="12:00"
    readonly />
    <ngx-mat-timepicker-toggle></ngx-mat-timepicker-toggle>
</mat-form-field>
<button mat-raised-button
		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
		(click)="pickerF.open()"
		color="primary">
    Open picker
</button>
 <ngx-mat-timepicker color="accent"
					 #pickerF></ngx-mat-timepicker>

Min and Max validation

add config to have min and/or max hour

Example
                    
<mat-form-field>
	<input matInput
		   name="selected_time_g"
		   [format]="12"
		   [max]="maxTime"
		   [min]="minTime"
		   [(ngModel)]="selectedTimes.G"
		   [ngxMatTimepicker]="pickerG"
		   placeholder="12:00"
		   readonly />
	<ngx-mat-timepicker-toggle matSuffix></ngx-mat-timepicker-toggle>
</mat-form-field>
<button mat-raised-button
		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
		(click)="pickerG.open()"
		color="primary">
	Open picker
</button>
<button mat-raised-button
		class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
		(click)="selectedTimes.G = '12:00'"
		color="primary">
	Invalidate
</button>
<ngx-mat-timepicker color="accent"
			  #pickerG></ngx-mat-timepicker>

Allow input completition

Don't link input to picker

Example
                    
<mat-form-field>
	<input matInput
	   [pattern]="timeRegex"
	   name="selected_time_h"
	   #inputModel="ngModel"
	   [(ngModel)]="selectedTimeFreeInput"
	   (blur)="inputModel.valid && selectedTimeFreeInputChanged(selectedTimeFreeInput)"
	   placeholder="12:00" />
	<mat-error *ngIf="inputModel.hasError('pattern')">Expected format: H:mm AM|PM</mat-error>
</mat-form-field>
<button mat-raised-button
	class="ngx-mtp-margin-top ngx-mtp-margin-bottom ngx-mtp-d-inline-block"
	(click)="pickerH.open()"
	color="primary">
	Open picker
</button>
<ngx-mat-timepicker (timeSet)="updateTime($event, 'selectedTimeFreeInput')"
	      			#pickerH></ngx-mat-timepicker>

Free and open source

Ready to start?

Go to the docs!

© 2024 MIT License