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.

Usage

The TimePicker component can be configured by hour and minute (accepts number values) or alternatively by setting the date property (accepts a Date object).

<TimePicker hour="9"
            minute="25"
            maxHour="23"
            maxMinute="59"
            minuteInterval="5"
            (timeChange)="onTimeChanged($event)">
</TimePicker>
<!-- Alternatively, you could use the time property with a Date object -->
<!-- <TimePicker [time]="todayObj" (timeChange)="onTimeChanged($event)"></TimePicker> -->

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

@Component({
    moduleId: module.id,
    templateUrl: "./usage.component.html"
})
export class UsageComponent {
    todayObj: Date = new Date();

    onTimeChanged(args) {
        const tp = args.object as TimePicker;

        const time = args.value;
        console.log(`Chosen time: ${time}`);
    }
}

Properties

Events

API References

Native Component