NOTE! You are browsing legacy documentation. For latest visit

NativeScript Angular

Time Picker

NativeScript provides a TimePicker control that enables users to choose a time as a ready-to-use dialog. Every time part can be picked separately by its corresponding section of the control - for hour, minutes and AM/PM.



The TimePicker component can be configured by hour and minute (accepts number values) or alternatively by setting the date property (accepts a Date object).

<TimePicker hour="9"
<!-- Alternatively, you could use the time property with a Date object -->
<!-- <TimePicker [time]="todayObj" (timeChange)="onTimeChanged($event)"></TimePicker> -->
import { Component } from "@angular/core";
import { TimePicker } from "tns-core-modules/ui/time-picker";

    templateUrl: "./usage.component.html"
export class UsageComponent {
    todayObj: Date = new Date();

    onTimeChanged(args) {
        const tp = args.object as TimePicker;

        const time = args.value;
        console.log(`Chosen time: ${time}`);


Name Type Description
hour number Gets or sets the time hour.
maxHour number Gets or sets the max time hour.
maxMinute number Gets or sets the max time minute.
minHour number Gets or sets the min time hour.
minMinute number Gets or sets the min time minute.
minute number Gets or sets the time minute.
minuteInterval number Gets or sets the time hour
time Date Gets or sets the time while passing a Date object (use it instaed hour and minute).


Name Description
hourChange Emitted when the hour property is changed.
minuteChange Emitted when the minute property is changed.
timeChange Emitted when the hour, minute or time property is changed.

API References

Name Type
tns-core-modules/ui/time-picker) Module
TimePicker Class

Native Component

Android iOS
android.widget.TimePicker UIDatePicker