ユーザーインターフェイス / コンポーネント / 日付ピッカー

日付ピッカー

DatePickerコントロールを使用すると、ユーザーはすぐに使用できるダイアログによって日付を選択できます。 すべての日付部分は、コントロールの対応するセクション（年、月、日）で個別に選択できます。

使用法

DatePickerの使用は、ただ年、月、日の設定と同じくらい簡単です。 もしくは、日付プロパティを設定できます（Dateオブジェクトを受け入れます）。 必要に応じて、minDateとmaxDateを設定することもできます。

<DatePicker year="1980" month="4" day="20" loaded="onDatePickerLoaded" date="{{ date }}" minDate="{{ minDate }}" maxDate="{{ maxDate }}"></DatePicker>
function onNavigatingTo(args) {
	const page = args.object;
	const vm = new Observable();

	// in the following example the DatePicker properties are binded via Observableproperties
	const TODAY = new Date();
	vm.set("date", TODAY); // the binded date property accepts Date object
	vm.set("minDate", new Date(1975, 0, 29)); // the binded minDate property accepts Date object
	vm.set("maxDate", new Date(2045, 4, 12)); // the binded maxDate property accepts Date object

	page.bindingContext = vm;
}
exports.onNavigatingTo = onNavigatingTo;

function onDatePickerLoaded(args) {
	const datePicker = args.object;
	datePicker.on("dateChange", (args) => {
		console.dir(args);
	});
	datePicker.on("dayChange", (args) => {
		console.dir(args);
	});
	datePicker.on("monthChange", (args) => {
		console.dir(args);
	});
	datePicker.on("yearChange", (args) => {
		console.dir(args);
	});
}
exports.onDatePickerLoaded = onDatePickerLoaded;
import { EventData, Observable } from "tns-core-modules/data/observable";
import { DatePicker } from "tns-core-modules/ui/date-picker";
import { Page } from "tns-core-modules/ui/page";

export function onNavigatingTo(args: EventData) {
	const page = <Page>args.object;
	const vm = new Observable();

	// in the following example the DatePicker properties are binded via Observableproperties
	vm.set("minDate", new Date(1975, 0, 29)); // the binded minDate property accepts Date object
	vm.set("maxDate", new Date(2045, 4, 12)); // the binded maxDate property accepts Date object

	page.bindingContext = vm;
}

export function onDatePickerLoaded(data: EventData) {
	const datePicker = <DatePicker>data.object;
		datePicker.on("dateChange", (args) => {
		console.dir(args);
	});
	datePicker.on("dayChange", (args) => {
		console.dir(args);
	});
	datePicker.on("monthChange", (args) => {
		console.dir(args);
	});
	datePicker.on("yearChange", (args) => {
		console.dir(args);
	});
}

デモソース

スタイリング

DatePickerコンポーネントのスタイル設定には、AndroidとiOSでネイティブコントロールが機能する方法が異なることに起因する、いくつかの制限があります。 大きな違いの1つは、AndroidではApp_Resources/Android/values/colors.xmlファイルを変更することでフォントの色を制御できるのに対し、 iOSではCSSプロパティcolorを直接使用できることです。

.date-picker {
	background-color: olivedrab;
	border-color: burlywood;
	border-width: 2;
	border-radius: 10;
	color: whitesmoke;
	vertical-align: middle;
}
Android固有： Android API21+では、DatePickerをデフォルトのスピナーモードからカレンダーモードに変更し、 プロジェクトのapp/App_Resources/Android/values-v21/colors.xmlで色設定を使用してデフォルトの背景と色を変更することもできます。 それを実現するには、app/App_Resources/Android/values-v21/styles.xmlを編集し、DatePickerのデフォルトスタイルを変更します。 
<!-- DatePicker in calendar mode -->
<style name="AppTheme" parent="AppThemeBase">
	<item name="android:datePickerStyle">@style/CalendarDatePicker</item>
</style>
<style name="CalendarDatePicker" parent="android:Widget.Material.Light.DatePicker">
	<item name="android:datePickerMode">calendar</item>
	<item name="colorPrimary">@color/ns_blue</item>
	<item name="colorPrimaryDark">@color/ns_primaryDark</item>
	<item name="colorAccent">@color/ns_accent</item>
</style>

デモソース

ヒントとコツ

コードビハインドによるDatePickerの作成

コードビハインドファイルで>DatePickerを使用するには、tns-core-modules/ui/date-pickerモジュールが必要です。

const DatePicker = require("tns-core-modules/ui/date-picker").DatePicker;
import { DatePicker } from "tns-core-modules/ui/date-picker";

プログラムでDatePickerを作成、制御します。

const datePicker = new DatePicker();
datePicker.day = 20;
datePicker.month = 4;
datePicker.year = 1980;
// datePicker.date = new Date(1980, 4, 20);

datePicker.minDate = new Date(1970, 12, 31);
datePicker.maxDate = new Date(2040, 4, 20);
const datePicker = new DatePicker();
datePicker.day = 20;
datePicker.month = 4;
datePicker.year = 1980;
// datePicker.date = new Date(1980, 4, 20); // using Date object

datePicker.minDate = new Date(1970, 12, 31);
datePicker.maxDate = new Date(2040, 4, 20);

プロパティ

名前 タイプ 説明
date Date 日付全体をDateオブジェクトとして取得または設定します。
minDate Date 最小日付を取得または設定します。
maxDate Date 最大日付を取得または設定します。
day number 日を取得または設定します。日は1から始まります。
month number 月を取得または設定します。月は1から始まります。
year number 年を取得または設定します。

イベント

名前 説明
dateChange dateプロパティが変更されたときに生成されます。
dayChange dayプロパティが変更されたときに生成されます。
monthChange monthプロパティが変更されたときに生成されます。
yearChange yearプロパティが変更されたときに生成されます。

APIリファレンス

名前 タイプ
tns-core-modules/ui/date-picker Module
DatePicker Class

ネイティブコンポーネント

ANDROID IOS
android.widget.DatePicker UIDatePicker
入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス