TimePicker

TimePicker is a custom component to select time through a Date object

{{date | date : 'h:mm:ss'}}

Import


import {{'{'}}TimePicker{{'}'}} from 'fuel-ui/fuel-ui';

Getting Started

TimePicker is a custom element to show an interactive TimePicker interface. TimePickers allow for many customizations

Usage


<timepicker 
    [(value)]="date" 
    [min]="minDate" 
    [max]="maxDate" 
    [hourStep]="hourStep"
    [minuteStep]="minuteStep" 
    [disabled]="disabled" 
    [readonlyInput]="readonly" 
    [showSeconds]="showSeconds" 
    [showSpinners]="showSpinners" 
    [showMeridian]="showMeridian">
</timepicker>


export class TimePickerExample {{'{'}}
    date: Date = new Date();
    minDate: Date = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 0, 0, 0);
    maxDate: Date = new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate(), 23, 59, 59);
    hourStep: number = 1;
    minuteStep: number = 1;
    readonly: boolean = false;
    disabled: boolean = false;
    showSeconds: boolean = true;
    showSpinners: boolean = true;
    showMeridian: boolean = true;
{{'}'}}

TimePicker Attributes

Loading table...

TimePicker Events

Loading table...