NativeScript Core

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.

Basics

TimePicker can be easily configured by setting the required properties.

XML

<TimePicker loaded="onPickerLoaded" verticalAlignment="center" row="2" col="0" colSpan="2" class="m-15"></TimePicker>

JavaScript

const Observable = require("tns-core-modules/data/observable").Observable;
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new Observable();
    vm.set("hourResult", "Hour: _");
    vm.set("minuteResult", "Minute: _");
    vm.set("timeResult", "TIme: _");
    page.bindingContext = vm;
}

function onPickerLoaded(args) {
    const timePicker = args.object;

    timePicker.hour = 10;
    timePicker.minute = 25;
    // handling 'time change' via code behind
    timePicker.on("timeChange", (result) => {
        const page = args.object.page;
        const vm = page.bindingContext;
        vm.set("hourResult", `Hour: ${result.object.hour}`);
        vm.set("minuteResult", `Minute: ${result.object.minute}`);
        vm.set("timeResult", `TIme: ${result.object.time}`);
    });
}

exports.onNavigatingTo = onNavigatingTo;
exports.onPickerLoaded = onPickerLoaded;

Improve this document

Demo Source


Binding

Set up properties TimePicker while using data binding.

XML

<TimePicker loaded="onPickerLoaded" 
            hour="{{ tphour }}" minute="{{ tpminute }}" 
            maxHour="{{ tpMaxHour }}" maxMinute="{{ tpMaxMinute }}"
            minuteInterval="{{ tpminuteInterval }}"
            minHour="{{ tpMinHour }}" minMinute="{{ tpMinMinute }}" 
            verticalAlignment="center" row="4" col="0" colSpan="2" class="m-15"></TimePicker>

JavaScript

const Observable = require("tns-core-modules/data/observable").Observable;
// setting up the initial values for the TimePicker component
function onNavigatingTo(args) {
    const page = args.object;
    const vm = new Observable();
    vm.set("tphour", 16);
    vm.set("tpminute", 15);
    vm.set("tpMaxHour", 18);
    vm.set("tpMaxMinute", 48);
    vm.set("tpMinHour", 10);
    vm.set("tpMinMinute", 10);
    vm.set("tpminuteInterval", 5);
    vm.set("timeResult", "_");
    page.bindingContext = vm;
}

function onPickerLoaded(args) {
    const timePicker = args.object;
    // handling 'time change' via code behind
    timePicker.on("timeChange", (result) => {
        const page = args.object.page;
        const vm = page.bindingContext;
        vm.set("timeResult", result.object.time);
    });
}

exports.onNavigatingTo = onNavigatingTo;
exports.onPickerLoaded = onPickerLoaded;

Improve this document

Demo Source


API Reference for the TimePicker Class

Native Component

Android iOS
android.widget.TimePicker UIDatePicker