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.


Configure Time Picker

TimePicker can be easily configured by setting the required properties. The example below demonstrates how to set up the initial hour and minute for the TimePicker component and how to handle selected time change via timeChange event. The hour and minute expects integer values and the timeChange will return a value of type Date. HTML

<TimePicker (loaded)="onPickerLoaded($event)" (timeChange)="onTimeChanged($event)" verticalAlignment="center" class="m-15"></TimePicker>


import { Component } from "@angular/core";
import { TimePicker } from "tns-core-modules/ui/time-picker";

    templateUrl: "./configure-time-picker.component.html"
export class ConfigureTimePickerComponent {

    onPickerLoaded(args) {
        let timePicker = <TimePicker>args.object;

        timePicker.hour = 9;
        timePicker.minute = 25;

    onTimeChanged(args) {

Improve this document

Demo Source

API Reference for the TimePicker Class

Native Component

Android iOS
android.widget.TimePicker UIDatePicker