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 in the XML declaration or via a code-behind reference.

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

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

    // Configurable properties of TimePicker
    timePicker.hour = 10;
    timePicker.minute = 25;
    // timePicker.minuteInterval = 5;
    // timePicker.minHour = 7;
    // timePicker.maxHour = 11;
    // timePicker.minMinute = 10;
    // timePicker.maxMinute = 45;
    // timePicker.time = new Date();

    // handling 'timeChange' event via code behind
    timePicker.on("timeChange", (args) => {
        // args is of type PropertyChangeData
        console.log("Picked TIME: ", args.value);
        console.log("Previous TIME: ", args.oldValue);

    });
}
exports.onPickerLoaded = onPickerLoaded;

export function onPickerLoaded(args) {
    const timePicker: TimePicker = <TimePicker>args.object;

    // Configurable properties of TimePicker
    timePicker.hour = 10;
    timePicker.minute = 25;
    // timePicker.minuteInterval = 5;
    // timePicker.minHour = 7;
    // timePicker.maxHour = 11;
    // timePicker.minMinute = 10;
    // timePicker.maxMinute = 45;
    // timePicker.time = new Date();

    // handling 'timeChange' event via code behind
    timePicker.on("timeChange", (argstm: any) => {
        // args is of type PropertyChangeData
        console.log("Picked TIME: ", argstm.value);
        console.log("Previous TIME: ", argstm.oldValue);

    });
}

Binding

The example below demonstrates setting up TimePicker's properties while using data binding.

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

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;
}
exports.onNavigatingTo = onNavigatingTo;

function onPickerLoaded(eventData) {
    const timePicker = eventData.object;
    // handling 'time change' via code behind
    timePicker.on("timeChange", (args) => {
        // args is of type PropertyChangeData
        console.log("Picked TIME: ", args.value);

        const page = args.object.page;
        const vm = page.bindingContext;
        vm.set("timeResult", args.value);
    });
}
exports.onPickerLoaded = onPickerLoaded;

import { Observable } from "tns-core-modules/data/observable";
import { TimePicker } from "tns-core-modules/ui/time-picker";
// setting up the initial values for the TimePicker component
export 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;
}

export function onPickerLoaded(eventData) {
    const timePicker: TimePicker = <TimePicker>eventData.object;
    // handling 'time change' via code behind
    timePicker.on("timeChange", (args: any) => {
        // args is of type PropertyChangeData
        console.log("Picked TIME: ", args.value);

        const page = args.object.page;
        const vm = page.bindingContext;
        vm.set("timeResult", args.value);
    });
}

Time Format

Using the NativeScript's ability to easily access the native Android and iOS APIs is allowing you to further modify the TimePicker behavior. In the example below a demonstration is made on how to change the time format from the default 12-hour (AM/PM) to 24-hour format.

<TimePicker loaded="onPickerLoaded"></TimePicker>

const isAndroid = require("tns-core-modules/platform").isAndroid;
const isIOS = require("tns-core-modules/platform").isIOS;

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

    if (isAndroid) {
        timePicker.android.setIs24HourView(java.lang.Boolean.TRUE);
        timePicker.hour = 23;
        timePicker.minute = 59;
    } else if (isIOS) {
        // a bit hacky solution
        // important set the country not the language for locale
        const local = NSLocale.alloc().initWithLocaleIdentifier("NL");
        timePicker.ios.locale = local;
        timePicker.hour = 23;
        timePicker.minute = 59;
    }
}
exports.onPickerLoaded = onPickerLoaded;

import {isAndroid, isIOS} from "tns-core-modules/platform";
import { TimePicker } from "tns-core-modules/ui/time-picker";

export function onPickerLoaded(args) {
    const timePicker: TimePicker = <TimePicker> args.object;

    if (isAndroid) {
        timePicker.android.setIs24HourView(java.lang.Boolean.TRUE);
        timePicker.hour = 23;
        timePicker.minute = 59;
    } else if (isIOS) {
        // a bit hacky solution
        // important set the country not the language for locale
        const local = NSLocale.alloc().initWithLocaleIdentifier("NL");
        timePicker.ios.locale = local;
        timePicker.hour = 23;
        timePicker.minute = 59;
    }
}

API Reference for the TimePicker Class

Native Component