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.

API Reference for the TimePicker Class

Native Component

Android iOS
android.widget.TimePicker UIDatePicker

Image

Configure Time Picker

TimePicker can be easily configured by setting the required properties.

HTML

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

TypeScript

import { Component } from "@angular/core";
import { setInterval, setTimeout, clearInterval } from "timer";

@Component({
    moduleId: module.id,
    styleUrls: ["./setinterval-example.css"],
    templateUrl: "./setinterval-example.html"
})
export class SetIntervalComponent {
    public buttoncolor;
    public color = ["green", "yellow", "red"];
    public id;
    public status = true;
    public buttonText = "Disable color change";

    constructor() {
        this.buttoncolor = "blue";
        let that = this;
        this.id = setInterval(() => {
            let randNumber = Math.floor(Math.random() * (that.color.length));
            that.buttoncolor = that.color[randNumber];
        }, 1000);
    }

    public onButtonTap(args) {
        if (this.status) {
            clearInterval(this.id);
            this.status = false;
            this.buttonText = "Enable color change";
        } else {
            let that = this;
            this.id = setInterval(() => {
                let randNumber = Math.floor(Math.random() * (that.color.length));
                that.buttoncolor = that.color[randNumber];
            }, 1000);
            this.status = true;
            this.buttonText = "Disable color change";
        }
    }
}

Improve this document

Demo Source


Stay connected with NativeScript

(expect a newsletter every 4-8 weeks)

NativeScript
NativeScript is licensed under the Apache 2.0 license .
© Progress Software Corporation. All Rights Reserved.