Help guide the NativeScript roadmap! Participate in the community survey. 📝

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.


<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