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.

Image

Configure Time Picker

TimePicker can be easily configured by setting the required properties.

HTML

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

TypeScript

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

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

onTimeChanged(args) {
    console.log(args.value);
}

Improve this document

Demo Source


API Reference for the TimePicker Class

Native Component

Android iOS
android.widget.TimePicker UIDatePicker