Have you seen all of the free code samples available on our Marketplace?

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>


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