Angular Date & Time Time selection Example

The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:

date - renders a date-only scroller or dropdown control
time - renders a time-only scroller or dropdown control
timegrid - renders a time grid for time selection
datetime - renders a date & time scroller or dropdown
calendar - renders a calendar view for date picking

When passing controls: ['time'], it will render a time-only picker - scroller for touchUi: true and a dropdown for touchUi: false. For a time grid use controls: ['timegrid'] instead.

You can change the timeFormat or rely on the formats coming from the locale settings.

Interested in date selection? Learn how to set up a date-only picker →

Get started with this example

Time list Time grid

Javascript jQuery Angular React Vue

<mbsc-datepicker
    [controls]="['time']"
    [touchUi]="">
</mbsc-datepicker>
<mbsc-datepicker
    [controls]="['time']"
    timeFormat="HH:mm"
    [touchUi]="">
</mbsc-datepicker>
<mbsc-datepicker
    [controls]="['time']"
    timeFormat="h:mm A"
    [touchUi]="">
</mbsc-datepicker>
<mbsc-datepicker
    [controls]="['time']"
    timeFormat="HH:mm:ss"
    headerText="Time: {value}"
    [touchUi]="">
</mbsc-datepicker>