OracleのSteve Muenchさんが彼のブログに、APEX 22.2から使用できる新しい日付ピッカーをカスタマイズして、範囲を指定をする方法を紹介されています。
Designer Collab for Date Ranges
https://diveintoapex.com/2023/02/07/designer-collab-for-date-ranges/
記事からダウンロードできるサンプル・アプリケーションに含まれる静的アプリケーション・ファイル、dateRangePicker.js、dateRangePicker.cssを取り出し、自分のアプリケーションに取り込むことで簡単に再利用できるようになっています。
色々な技が使われていて再利用が容易になっているのですが、実装を理解するにはスキルが必要です。もう少し実装を分かりやすくするため、動的アクションによる実装に変更してみました。dateRangePicker.cssはそのまま流用し、日付ピッカーのdayFormatterについてもほぼ同じ実装を流用します。
実装した日付範囲ピッカーは以下のように動作します。日付範囲ピッカーは表示形式をInlineにした日付ピッカーで、開始日と終了日はそれぞれ異なるページ・アイテムに設定しています。
以下より実装について説明します。
ページ・アイテムとして開始日を保存するP1_DATE_START、終了日を保存するP1_DATE_ENDを作成します。上のGIF動画では、これらのページ・アイテムの値が画面に表示されていますが、一般的には非表示にすると思います。
日付範囲ピッカーですが、ページ・アイテムP1_DATE_RANGEとして作成しています。
タイプは日付ピッカーです。設定の表示形式としてInlineを選択します。外観と動作のShow Clear Buttonにチェックを入れます。表示形式がInlineの場合、ページ・アイテムの値をクリアするためにこのボタンが必要です。
詳細のCSSクラスにdate-range-pickerを設定します。これはdateRangePicker.cssで定義されているCSSクラスを適用するために必要です。
タイミングのイベントは変更、選択タイプはアイテム、アイテムとしてP1_DATE_RANGEを指定します。日付範囲ピッカー上で日付を選択（変更）したときに、動的アクションが実行されます。
TRUEアクションはJavaScriptコードの実行、設定のコードとして以下を記述します。クリックしたときの状態に応じて、選択された日付を開始日または終了日として設定しています。最後に日付範囲ピッカーをリフレッシュし、設定された開始日と終了日の間に色を付けます。
影響を受ける要素の選択タイプにアイテムを選び、アイテムとしてP1_DATE_START、P1_DATE_ENDの２つのページ・アイテムを設定します。開始日を保持するページ・アイテムを先頭に配置します。
開始日から終了日の間に色をつける処理は、日付範囲ピッカーに実装するdayFormatterが行います。
ページ・プロパティのJavaScriptのファンクションおよびグローバル変数の宣言に以下を記述します。
const DATE_FORMAT = "yyyy/mm/dd";
ページ・ロード時に実行でdayFormatterを定義します。開始日にCSSクラスdateRangeStart、終了日にdateRangeEnd、開始日と終了日の間の日付にはdateRangeMiddleを設定しています。開始日と終了日が同じ場合はCSSクラスとしてdateRangeSingleDayを設定しています。
CSSのファイルURLに以下を記述します。CSSファイルはこちらから、または英語の元記事よりサンプル・アプリケーションをダウンロードし、dateRangePicker.cssを取り出して静的アプリケーション・ファイルとして保存しておきます。
#APP_FILES#dateRangePicker#MIN#.css
以上で実装は完了です。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/date-range-picker.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
完
