日時ピッカーウィジェットを使用して、ユーザーがマッシュアップで特定の日付/時刻の選択や範囲選択ができるようにすることができます。ランタイムで、ウィジェットは折りたたまれた状態で表示されます。カレンダーアイコンをクリックするとカレンダービューが開き、各月の日付に加えて選択ドロップダウンリストが表示されます。カレンダーのドロップダウンリストは、キーボード入力をサポートするコンボボックスです。値を入力することで、アイテムをさらに速やかに選択できます。カレンダーボタンをクリックするとポップアップカレンダーが開き、日付を対話的に選択できます。日付ピッカーのコンフィギュレーションに基づいて、カレンダーにさまざまなコントロールが表示されます。以下の方法でウィジェットを設定できます。

日付選択は「選択」ボタンをクリックしたときにのみ保存され、ウィジェットの外側の領域をクリックしたときや Esc キーを押したときには保存されません。

設定されている日付選択に応じて、追加の選択ボックスがウィジェットに追加されます。次の表に、使用可能なオプションを示します。

範囲選択する場合、1 つ目の選択が範囲の開始として使用されます。ただし、2 つ目に選択した日付が最初に選択した日付よりも前の日付である場合、有効な範囲を維持するために日付が自動的に入れ替わります。また、新しい日付をクリックすると既存の範囲がクリアされ、新しい範囲の選択が開始されます。

カレンダーで選択可能な日付範囲を、次の 3 つの方法のいずれかによって制限できます。

デフォルトでは、日時ピッカーを使用して日付を選択できます。時刻選択を有効にすると、ユーザーはカレンダーで日付を選択するだけでなく、特定の時刻や時刻範囲を選択できるようになります。このウィジェットに時刻選択を追加するには、ウィジェットの DateOnly プロパティを false に設定します。デフォルトでは、時刻選択は時と分に設定されています。DisplaySeconds プロパティを true に設定することで、ユーザーが秒を選択できるようにすることができます。次のイメージでは、ウィジェットの時刻選択に秒が含まれています。

デフォルトでは、ウィジェットにはすべての日付が表示されます。プロパティ MaxRange を使用して、日付選択を特定の範囲に制限できます。たとえば、可能な範囲を 20 日間に設定するには、DateRange プロパティを true に設定し、「検証」パネルの MaxRange プロパティを 20 に設定します。

次のイメージは、選択された範囲値と範囲外の日付を示しています。範囲は、ユーザーが最初の開始日または終了日を選択した後、ランタイムで計算されます。MaxRange は、開始日と終了日の最小値と最大値の範囲内です。選択すると、設定した値から外れる日付は無効になります。イメージの例 3 を参照してください。

時刻はデフォルトでは 24 時間形式で表示されます。12 時間形式で時刻を表示するには、ウィジェットの TwelveHourClock プロパティを true に設定します。AM または PM を選択する追加のドロップダウンリストが表示されます。

Interval プロパティを使用して、ランタイムでこのウィジェットが表示されるときの現在の日付または時刻を基準にして、デフォルトで選択される値をオフセットします。IntervalType プロパティを使用して、選択される値を前後にオフセットするときの単位を日、時、分、または秒に設定できます。たとえば、日付ピッカーウィジェットで選択される時間を 30 分進めるには、IntervalType プロパティを「分」に設定し、Interval プロパティを 30 に設定します。

デフォルトでは、日付順序はマッシュアップを表示しているユーザーのロケールに従って自動的に設定されます。たとえば、日付が日-月-年フォーマットで表示される地域と、月-日-年フォーマットで表示される地域があります。ウィジェットの DateOrder プロパティを使用して、すべてのユーザーについて順序を手動で設定できます。特定の順序を適用すると、MonthFormat および DateDelimiter がプロパティのリストに追加されます。

日付の形式を設定するには、MomentJS ライブラリの構文に基づいてウィジェットの FormatToken プロパティを設定します。日付のフォーマットのオプションの詳細については、ウィジェットの日付と時刻のフォーマットを参照してください。

デフォルトでは、このウィジェットでサポートされている日付または時刻のフォーマットを示す文字列が表示されます。コンボボックスを使用することで、カレンダーを開くことなく、ウィジェットの値をさらに速やかに入力できます。DisableMaskedInput プロパティを true に設定することで、入力マスクを無効にできます。次のイメージは、入力マスクが表示された日付の更新を示しています。

共通のプロパティに加えて、プロパティ MaxDate および MinDate を使用して、ウィジェットで使用可能な日付範囲を制限できます。範囲外の日付を選択すると、失敗メッセージが表示されます。

デフォルトの失敗メッセージを設定するには、プロパティ MinDateFailureMessage および MaxDateFailureMessage 、またはプロパティ MaxRangeFailureMessage を使用します。

共通の検証プロパティの詳細については、ウィジェットへの検証の適用を参照してください。