Skip to main content

 

パターン

 

従来のWebアプリにのみ適用されます

 

OutSystems

DatePicker

単一の日付または日付の範囲を選択します。

DatePickerは、エンドユーザーがカレンダーを使用して単一の日付または日付の範囲を選択できるようにするために使用します。

使用方法

入力とDatePickerを画面にドラッグし、パラメータを設定します。InputWidgetIdパラメータのみが必須で、ページで選択される日付を表示する入力ウィジェットを参照する必要があります。

高度なオプションの詳細については、Pikadayライブラリの公式ドキュメントをご覧ください。

  1. Inputウィジェットをプレビューにドラッグします。

  2. 入力の名前を指定します(例: datepicker)。

  3. 入力にdate型の変数を設定します。

  4. DatePickerをプレビューにドラッグします。

  5. InputWidgetIdに入力名を設定します。

  6. Eventsで、OnCloseイベントとOnSelectイベントを作成します。

  7. ロジックの入力パラメータで日付を使用します。

  8. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
InputWidgetId 要素の表示をトリガーする入力要素名。 Text True なし
ButtonWidgetId 要素の表示をトリガーする要素名(例: button)。 Text False ""
DisabledDates 無効化された日付のリスト。 Date List False なし
MinDate 日付ピッカーでこの日付以降の日付が有効になり、この日付より前の日付が無効になります。 Date False なし
MaxDate 日付ピッカーでこの日付以前の日付が有効になり、この日付より後の日付が無効になります。 Date False なし
InitialDate 設定した場合、設定した日付がカレンダーで最初に表示されます。設定していない場合、現在の日付が表示されます。 Date Time False CurrDate()
DateFormat サーバー構成で定義された日付形式をデフォルトに設定します。デフォルトはサーバーの日付形式です。 Text False ""
AdvancedFormat 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。 DatePickerAdvancedFormat False CurrDate()
SelectInterval 2つの日付の間を選択することができます。Trueに設定すると、ブロックのイベント「On Select」は両方のパラメータの値を持ちます。 False

DatePickerAdvancedFormatの情報

以下は、一部の高度なプロパティの概要です。

入力名 説明 必須 デフォルト値
EventsList イベントのリスト(Date Time型) Date Time List False なし
AdvancedFormatJSON オプションを含む文字列({ disableWeekends: true, BeginEmpty: true }など)。高度なオプションの詳細については、公式ドキュメント(https://github.com/dbushell/Pikaday)をご覧ください Date Time List False なし

レイアウトおよびクラス

月ピッカー

年ピッカー

イベント

イベント名 説明 必須
onClose 日付ピッカーを閉じ、最後に選択された日付が返されたときにトリガーされるイベント。 False
onOpen 日付ピッカーを開いたときにトリガーされるイベント。 False
OnSelect 日付が選択され返されたときにイベントがトリガーされます。 False

高度なユースケース

空の入力から開始する

  1. DatePickerをプレビューにドラッグします。

  2. AdvancedFormatプロパティを展開します。

  3. AdvancedFormatJSONに「{ BeginEmpty: true }」を追加します。

フラットな日付ピッカーを使用する

  1. DatePickerをプレビューにドラッグします。

  2. AdvancedFormatプロパティを展開します。

  3. AdvancedFormatJSONに「{ bound: false }」を追加します。

  4. イベントを使用して選択された日付を取得するには、OnCloseの代わりにOnSelectを使用します。

イベントを追加する

  1. DatePickerをプレビューにドラッグします。

  2. AdvancedFormatプロパティを展開します。

  3. EventListに日時のリストを追加します。

日付形式を使用する

  1. DatePickerをプレビューにドラッグします。

  2. 日付の形式を設定します(たとえば、"DD MMM of YYYY"の場合、12 Dec of 2018のように表示されます)。

  3. onCloseイベントまたはOnSelectイベントを作成し、ロジックで日付を使用します。

デバイスの互換性

モバイルデバイスで使用する場合、日付ピッカーの配置に関連する問題を避けるため、水平方向で使用する必要があります。

  • Was this article helpful?