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

    });
}

Improve this document

Demo Source

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

Improve this document

Demo Source

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

Improve this document

Demo Source

API Reference for the TimePicker Class

Native Component