ngx-material-timepicker
Handy material design timepicker for Angular 6.0+
Examples
Simple examples
<div class="12hr-example">
<input placeholder="12hr format (default settings)" aria-label="12hr format" [ngxTimepicker]="default" readonly>
<ngx-material-timepicker #default></ngx-material-timepicker>
</div>
<div class="24hr-example">
<input placeholder="24hr format" aria-label="24hr format" [ngxTimepicker]="fullTime" [format]="24" readonly>
<ngx-material-timepicker #fullTime></ngx-material-timepicker>
</div>
<div class="default-time-example">
<input aria-label="default time" [ngxTimepicker]="defaultValue" [value]="'05:11 pm'" readonly>
<ngx-material-timepicker #defaultValue></ngx-material-timepicker>
</div>
<div class="ngx-material-timepicker-example__form-group">
<input placeholder="Default time 11:11 pm" aria-label="default time"
[ngxTimepicker]="defaultTime" readonly>
<ngx-material-timepicker #defaultTime [defaultTime]="'11:11 pm'"></ngx-material-timepicker>
</div>
<div class="disabled-example">
<input placeholder="Disabled Time Picker" aria-label="disabled time picker" [ngxTimepicker]="disabled" [disabled]="true">
<ngx-material-timepicker #disabled></ngx-material-timepicker>
</div>
Simple timepicker settings
Min and Max value
<div class="min-time-example">
<input placeholder="Min time 03:15 am"
[ngxTimepicker]="min" [min]="'03:15 am'" readonly>
<ngx-material-timepicker #min></ngx-material-timepicker>
</div>
<div class="max-time-example">
<input placeholder="Max time 06:18 pm"
[ngxTimepicker]="max" max="06:18 pm" readonly>
<ngx-material-timepicker #max></ngx-material-timepicker>
</div>
<div class="time-range-example">
<input placeholder="Time range from 12:10 am to 08:11 pm"
[ngxTimepicker]="range" min="12:10 am" max="08:11 pm" readonly>
<ngx-material-timepicker #range></ngx-material-timepicker>
</div>
Set up min or max value (or both) for the timepicker.
Timepicker toggle button
<div class="toggle-example">
<input [ngxTimepicker]="toggleTimepicker" [disableClick]="true" readonly>
<ngx-material-timepicker-toggle [for]="toggleTimepicker"></ngx-material-timepicker-toggle>
<ngx-material-timepicker #toggleTimepicker></ngx-material-timepicker>
</div>
<div class="toggle-custom-icon-example">
<input [ngxTimepicker]="toggleIcon" [disableClick]="true" readonly>
<ngx-material-timepicker-toggle [for]="toggleIcon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px" ngxMaterialTimepickerToggleIcon>
<path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,16H7.995 C7.445,16,7,15.555,7,15.005v-0.011C7,14.445,7.445,14,7.995,14H14V5.995C14,5.445,14.445,5,14.995,5h0.011 C15.555,5,16,5.445,16,5.995V16z"/>
</svg>
</ngx-material-timepicker-toggle>
<ngx-material-timepicker #toggleIcon></ngx-material-timepicker>
</div>
<div class="toggle-disabled-example">
<input [ngxTimepicker]="toggleTimepickerDisabled" [disableClick]="true" readonly>
<ngx-material-timepicker-toggle [for]="toggleTimepickerDisabled" [disabled]="true"></ngx-material-timepicker-toggle>
<ngx-material-timepicker #toggleTimepickerDisabled></ngx-material-timepicker>
</div>
Provide you to open the timepicker by button.
Provide an custom icon to the toggle button.
Editable dial
<div class="editable-dial-example">
<input placeholder="Editable dial" aria-label="Editable dial"
[ngxTimepicker]="editableDial" readonly>
<ngx-material-timepicker #editableDial [enableKeyboardInput]="true"></ngx-material-timepicker>
</div>
You can change time right through the timepicker dial (with a keyboard) without interaction with a clock face.
Minutes Gap
<div class="minutes-gap-example">
<input placeholder="Default gap"
[ngxTimepicker]="defaultGap" readonly>
<ngx-material-timepicker #defaultGap></ngx-material-timepicker>
</div>
<div class="minutes-gap-example">
<input placeholder="Gap with 5"
[ngxTimepicker]="with5Gap" readonly>
<ngx-material-timepicker #with5Gap [minutesGap]="5"></ngx-material-timepicker>
</div>
You can set up a gap for minutes. It is '1' by default.
Custom settings examples
<div class="custom-buttons-example">
<input placeholder="Custom buttons" aria-label="Custom buttons" [ngxTimepicker]="timepickerWithButtons" readonly>
<ngx-material-timepicker #timepickerWithButtons [cancelBtnTmpl]="cancelBtn"
[confirmBtnTmpl]="confirmBtn"></ngx-material-timepicker>
<ng-template #cancelBtn>
<button style="margin-right: 10px;">Cancel tmpl</button>
</ng-template>
<ng-template #confirmBtn>
<button>Confirm tmpl</button>
</ng-template>
</div>
<div class="custom-theme-example">
<input placeholder="Custom theme" aria-label="Custom theme"
[ngxTimepicker]="darkPicker" readonly>
<ngx-material-timepicker #darkPicker [theme]="darkTheme"></ngx-material-timepicker>
</div>
//...
darkTheme: NgxMaterialTimepickerTheme = {
container: {
bodyBackgroundColor: '#424242',
buttonColor: '#fff'
},
dial: {
dialBackgroundColor: '#555',
},
clockFace: {
clockFaceBackgroundColor: '#555',
clockHandColor: '#9fbd90',
clockFaceTimeInactiveColor: '#fff'
}
};
<div class="custom-hint-example">
<input placeholder="Custom hint" aria-label="Custom hint"
[ngxTimepicker]="customHint" readonly>
<ngx-material-timepicker #customHint [enableKeyboardInput]="true"
[editableHintTmpl]="dialHint"></ngx-material-timepicker>
<ng-template #dialHint>
<p>Custom hint</p>
</ng-template>
</div>
You can change time picker view with your own settings.
Append to input
<div class="ngx-timepicker-field-example">
<input placeholder="Append to input" aria-label="Append to input"
[ngxTimepicker]="appendedToInput" readonly>
<ngx-material-timepicker #appendedToInput
[appendToInput]="true"></ngx-material-timepicker>
</div>
Timepicker appends to input.
ngx-timepicker-field
Examples
Simple examples
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [defaultTime]="'11:11 am'"></ngx-timepicker-field>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [format]="24" [defaultTime]="'23:11'"></ngx-timepicker-field>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [format]="24" [defaultTime]="'23:11'"></ngx-timepicker-field>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [disabled]="true"></ngx-timepicker-field>
</div>
Simple settings
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼
Min and Max value
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [min]="'03:15 am'"></ngx-timepicker-field>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [max]="'06:18 pm'"></ngx-timepicker-field>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field min="12:10 am" max="08:11 pm"></ngx-timepicker-field>
</div>
Set up min or max value (or both) for the timepicker.
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼
Minutes Gap
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [defaultTime]="'11:00 am'" [minutesGap]="5"></ngx-timepicker-field>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [defaultTime]="'11:00 am'" [minutesGap]="30"></ngx-timepicker-field>
</div>
Set up a gap for minutes (it's '1' by default).
▲ ▼
▲ ▼
▲ ▼
▲ ▼
Examples with toggle
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [buttonAlign]="'left'"></ngx-timepicker-field>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [toggleIcon]="icon"></ngx-timepicker-field>
<ng-template #icon>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
<path d="M15,3C8.373,3,3,8.373,3,15c0,6.627,5.373,12,12,12s12-5.373,12-12C27,8.373,21.627,3,15,3z M16,16H7.995 C7.445,16,7,15.555,7,15.005v-0.011C7,14.445,7.445,14,7.995,14H14V5.995C14,5.445,14.445,5,14.995,5h0.011 C15.555,5,16,5.445,16,5.995V16z"/>
</svg>
</ng-template>
</div>
<div class="ngx-timepicker-field-example">
<ngx-timepicker-field [controlOnly]="true"></ngx-timepicker-field>
</div>
Manipulations with toggle button
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼
▲ ▼