Skip to main content

 

パターン

 

 

OutSystems

TimePicker

リストから単一の時刻を選択します。

TimePickerは、エンドユーザーが単一の時刻をドロップダウンから選択できるようにするために使用します。

使用方法

  1. TimePickerパターンをプレビューにドラッグします。

  2. 入力にTime型の変数を設定します。

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

入力パラメータ

入力名 説明 必須 デフォルト値
StartTime 最初のアイテムとするために、この時刻までドロップダウンオプションがスクロールします。時刻は、最初に設定した間隔に基づくようにします。デフォルトはNewTime(0,0,0)、つまり12:00amです。例: 間隔を30に設定している場合に、開始時刻を10:05:00に設定したとします。これは入力に時刻として表示されますが、間隔が合わないためドロップダウンは時間までスクロールしません。 Time No NewTime(0,0,0)
Interval オプション間の時間の間隔(分単位)。例: 30の場合、オプションは08:00:00、08:30:00、09:00:00...のようになります。 Integer No 30
Is24hFormat Trueの場合は、時刻が24時間形式になります。Falseの場合は、12時間形式になります。 Boolean No True
AdvancedFormat 入力パラメータによって提供されるオプションのほかに、追加オプションを使用できます。.入力: TimePickerAdvancedFormat: DisabledTimes(Time List)、MinTime(Time)、MaxTime(Time)、StartEmpty(Boolean) TimePickerAdvancedFormat No なし

レイアウトおよびクラス

イベント

イベント名 説明 必須
OnSelect 時刻が選択され返されると、イベントがトリガーされます。 False

CSSセレクタ

要素 CSSクラス 説明
.time-option .time-option-selected 時刻オプションが選択されている場合
.time-option .time-picker .dropdown-content-list .time-option[disabled="disabled"] 時刻オプションが無効になっている場合

高度なユースケース

OnSelectイベントを使用する

  1. TimePickerパターンをプレビューにドラッグします。

  2. 入力にTime型の変数を設定します。

  3. StartTimeパラメータを変数Timeに設定します。

  4. Preparationで、Time変数をピッカーで使用する開始時刻に設定します。

  5. OnSelectイベントをTimePatternOnSelectに設定します。

  6. TimePatternOnSelectアクションで、もう一度Time変数にTimeSelectedを割り当てます。

  7. Feedback_Messageアクションを設定し、メッセージでTimeを表示します。

  8. TimePickerの周囲にTimepicker_Containerコンテナを作成します。

  9. TimePatternOnSelectアクションで、Timepicker_ContainerにAjax refreshを追加します。

特定の時刻を無効にする

  1. TimePickerパターンをプレビューにドラッグします。

  2. 入力にTime型の変数を設定します。

  3. AdvancedFormatパラメータの前にあるプラスをクリックします。

  4. DisabledTimesパラメータの前にあるプラスをクリックします。

  5. 時刻NewTime(4,0,0)とNewTime(7,0,0)を追加します。

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

入力を空にして開始する

  1. TimePickerパターンをプレビューにドラッグします。

  2. 入力にTime型の変数を設定します。

  3. AdvancedFormatパラメータの前にあるプラスをクリックします。

  4. StartEmptyパラメータを[True]に設定します。

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

  • Was this article helpful?