Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

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

 

 

OutSystems

Date Picker

Date Picker UIパターンを使用すると、ユーザーがカレンダーを使用して単一の日付または日付の範囲を選択することができます。

Date Picker UIパターンの使用方法

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

  1. Service Studioで、ツールボックスから、Inputウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  2. Properties]タブでInputのNameを入力します。この例では、「datepicker」という名前を付けます。

  3. Variable]ドロップダウンで[New Local Variable]を選択します。

  4. [Properties]タブで、変数のData Typeを[Date]に設定します。

  5. ツールボックスから、Date Pickerウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

  6. InputWidgetIdにInputのIDを設定します。

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

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

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

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

プロパティ

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

日付ピッカーの高度な形式に関する情報

プロパティ 説明
EventsList(DateTime List型):オプション イベントのリスト(Date Time型)
AdvancedFormatJSON(DateTime List型):オプション オプションを含む文字列({ disableWeekends: true, BeginEmpty: true }など)。高度なオプションについては、公式ドキュメントをご覧ください。https://github.com/dbushell/Pikaday

デバイスの互換性

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

  • Was this article helpful?