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

HTML
TypeScript

<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}`);
    }
}

Improve this document

Demo Source

Properties

Name	Type	Description
`hour`	`number`	Gets or sets the time hour.
`maxHour`	`number`	Gets or sets the max time hour.
`maxMinute`	`number`	Gets or sets the max time minute.
`minHour`	`number`	Gets or sets the min time hour.
`minMinute`	`number`	Gets or sets the min time minute.
`minute`	`number`	Gets or sets the time minute.
`minuteInterval`	`number`	Gets or sets the time hour
`time`	`Date`	Gets or sets the time while passing a `Date` object (use it instaed `hour` and `minute`).

Events

Name	Description
`hourChange`	Emitted when the `hour` property is changed.
`minuteChange`	Emitted when the `minute` property is changed.
`timeChange`	Emitted when the `hour`, `minute` or `time` property is changed.

API References

Name	Type
tns-core-modules/ui/time-picker)	`Module`
TimePicker	`Class`

Native Component

Android	iOS
android.widget.TimePicker	UIDatePicker

NativeScript Angular