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.

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

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