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. 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>

TypeScript

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

@Component({
    moduleId: module.id,
    templateUrl: "./configure-time-picker.component.html"
})
export class ConfigureTimePickerComponent {

    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