NativeScriptには、ユーザーがすぐに使用できるダイアログとして時刻を選択できるTimePickerコントロールが用意されています。 コントロールの対応するセクションによって、時間、分、および AM/PM の時間部分を個別に選択できます。
TimePickerは、XML宣言で必要なプロパティを設定するか、コードビハインドを使用して簡単に構成できます。
<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);
});
}以下の例は、データバインディングを使用しながらTimePickerのプロパティを設定する方法を示しています。
<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);
});
}NativeScriptの機能を使用してネイティブのAndroidおよびiOS APIに簡単にアクセスできるため、TimePickerの動作をさらに変更できます。 以下の例では、時間の形式をデフォルトの12時間（AM/PM）から24時間形式に変更する方法を示しています。
<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リファレンス: TimePickerクラス
ネイティブコンポーネント
| ANDROID | IOS |
|---|---|
| android.widget.TimePicker | UIDatePicker |