Skip to main content

 

UIを設計する

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

OutSystems

DatePickerパターン

DatePickerパターンでは、フラットなUIの日時ピッカーをインラインで画面に表示できます。イベントがある日付のリストを受け取ることができ、日付の範囲内で選択することができます。DatePickerはPikaday.jsライブラリを使用して作成されています。

このパターンを使用すると、様々なデバイスで、1行あたりのアイテム数が異なる要素のリストを並べて表示できます。

DatePickerパターンの使用方法

このブロック内の静的データまたはListウィジェットを使用して、Galleryパターンでアイテムを表示できます。

1.DatePickerをページにドラッグすると、イベントを作成するように促すプロンプトが表示されます。

2.選択された日付にアクセスするには、 startDateへの割り当てを作成する必要があります(SelectIntervalがFalseの場合)。

3.変数PickedDateのデフォルト値をCurrDateTime()に設定します。

結果:

選択した日のイベントを一覧表示する

1.イベントのリストを配置する領域を設定します。

2.DateTimeアトリビュートのエンティティを作成します。

3.マッピングする適切なアトリビュートを使用して、eventListのEventListパラメータにエンティティを設定します。

4.ページにリストを追加します。

5.新しいローカル変数を作成します。

6.Eventsに対する別のAggregateを取得し、Aggregateにフィルタ「DateTimeToDate(Events.DateTime) = Date」を設定します。

結果:

入力パラメータ

入力名 説明 デフォルト値
EventList 日付をイベント日として強調表示するために使用するDateTimeレコードのリストを受け取ります。 なし
MinDate この日付より前の日は無効になります。 なし
MaxDate この日付より後の日は無効になります。 なし
InitialDate DatePickerの初期選択日。未設定の場合は、デフォルトで現在の日付になります。 現在の日付
ShowWeekNumber DatePickerの左側に週番号を表示します。 True
FirstWeekDay 最初に表示する曜日を定義します。
0: 日曜日
1: 月曜日
2: 火曜日
3: 水曜日
4: 木曜日
5: 金曜日
6: 土曜日
1
ShowTime DatePickerの下に時刻ピッカーを表示します。 False
Show24HourFormat 時刻ピッカーを24時間形式に変更します。 True
DisabledDaysList DatePickerで無効となるDateTimeレコードのリストを受け取ります。このパラメータが未設定の場合は、MinDateとMaxDateの間のすべての日付けが有効になります。デフォルト値はありません。 なし
DisabledWeekDays 無効な曜日を含む文字列。文字列が空の場合は、すべての曜日が有効です。たとえば、日曜日と金曜日が無効である場合は次の値になります: "0,5,6"
0: 日曜日
1: 月曜日
2: 火曜日
3: 水曜日
4: 木曜日
5: 金曜日
6: 土曜日
なし
SelectInterval 2つの日付の間を選択することができます。Trueに設定すると、ブロックのイベント「On Select」は両方のパラメータの値を持ちます。 False

イベント

イベント名 説明 必須
OnSelect DatePickerの日付が選択された後に実行するアクション。SelectIntervalが有効になっている場合、両方のパラメータが値を返します。有効になっていない場合、StartDateのみが値を持ちます。 True

レイアウトおよびクラス

CSSセレクタ

要素 CSSクラス 説明
td .is-selected クリックされた日付。
td .is-startrange SelectIntervalがTrueの場合、このクラスは範囲の開始値になります。
  • Was this article helpful?