Oracle APEX 22.2より、新たに開発された日付ピッカーのコンポーネントが採用されています。この日付ピッカーについて、開発者のRonny WeissさんがAPEX Office Hourで解説されています。
すでにアプリに組み込まれている日付ピッカーが置き換わることはないようです。
以前はOracle JETが提供しているDate Pickerのコンポーネントを使っていました。それ以前はjQueryのDate Pickerでした。Oracle JETのDate PickerはAPEXにあまり合っていなかったようで、APEXのチームが専用の日付ピッカーを開発した、という経緯みたいです。
コンポーネントが完全に置き換わっているため、以前に確認した休日の設定方法が新しい日付ピッカーでは使えなくなりました。
新しい日付ピッカーでの日本の休日の設定方法を確認しました。
最新のサンプル・アプリケーションのSample Calendarには、米国の休日の設定が含まれています。
ギャラリからSample Calendarをインストールして確認してみます。
サンプル・アプリケーションを実行し、
Date Pickerの
Day Formatting (Plug-in)を開きます。
Plug-inにある日付ピッカーには、米国の休日が設定されています。
ページ・デザイナで設定を確認します。
ページ・ロード時に、休日を設定する
動的アクション・プラグインを実行しています。
設定のLoad fromとしてICS File（他にSQL Queryを選択できます）、URL for ICS fileに休日が設定されたiCal（ics）ファイルを指定しています。
適用する日付ピッカーのページ・アイテムは、影響を受ける要素に指定します。
プラグインのダウンロードは、
GitHubから行います。
GitHubで表示をクリックして開きます。
Format Date Picker DaysのDownload Plug-Inをクリックし、表示されたコードを保存します。プラグインとしてロードするには、ファイルの拡張子を.sqlにする必要があります。
このプラグインもそうですが、GitHubから提供されているアプリケーションやプラグインはOracle APEXの製品サポートの対象外です。
このプラグインを使った、簡単なアプリケーションを作ってみます。
アプリケーション作成ウィザードを起動し、空のアプリケーションを作成します。
名前は日本の休日とします。
アプリケーションの作成をクリックします。
プラグインを導入します。
共有コンポーネントのプラグインを開きます。
インポートをクリックします。
ダウンロードしたプラグインのSQLファイルを選択します。ファイル・タイプはデフォルトでプラグインが選択されています。
次へ進みます。
確認画面に移ります。次へ進みます。
インストールするアプリケーションを確認し、プラグインのインストールをクリックします。
プラグインFormat Date Picker Daysがインストールされました。
最新のSample Calendarサンプル・アプリケーションがインストールされていれば、プラグインの作成を実行し、既存のプラグインのコピーを行うことにより、Sample CalendarからプラグインFormat Date Picker Daysをコピーすることもできます。
ページ・デザイナでホーム・ページを開き、ページ・アイテムを作成します。
識別の名前はP1_DATE、タイプに日付ピッカーを選択します。ラベルは日本の休日とします。
左ペインで動的アクション・ビューを開きます。
ページのロードで動的アクションの作成を実行します。
作成された動的アクションの識別の名前は日付ピッカーの初期化とします。タイミングのイベントはページのロードになります。
TRUEアクションとして、先ほど作成したFormat Date Picker Days[プラグイン]を選択します。設定のLoad fromにICS Fileを選択し、URL for ICS fileとして表示される米国の休日のICSファイルのen.usaの部分をja.japaneseに変更します。
https://calendar.google.com/calendar/ical/ja.japanese%23holiday@group.v.calendar.google.com/public/basic.ics
影響を受ける要素の選択タイプはアイテム、アイテムとしてP1_DATEを指定します。
休日の選択を禁止する場合は、設定のCSS Classにis-disabledを追加します。（ただし、こうすると選択は禁止されますが、tooltipとして祝日名が表示されなくなります。- この点について記事に追記しました。）
以上で日付ピッカーに日本の祝日が設定されました。
SQLを試してみます。
syukujitsu.csvがダウンロードされます。
SQLワークショップのデータ・ワークショップを使って、CSVを表にロードします。
データのロードを選択します。
ダウンロードしたsyukujitsu.csvを、アップロードするファイルとして選択します。
ロード先は新規表とし、表名はSYUKUJISTUとします。
CSVファイルは日本語Shift-JISでエンコードされています。
ファイル・エンコーディングとして
日本語(Shift JIS)を選択し、プレビューの表示が日本語になることを確認します。
祝日の日付をDATE型で読み込むために、構成を開きます。
列名国民の祝日_休日月日の列タイプをDATEに変更し、書式マスクにYYYY/MM/DDを設定します。
変更の保存をクリックします。
以上でデータのロードを実行します。
データのロードが完了したら、準備は完了です。
ページ・アイテムP1_DATE2を作成し、動的アクションのTRUEアクションも新たに作成します。初期化に使用するプラグインの設定のLoad fromをSQL Queryに設定します。
SQL Sourceは以下になります。
国民の祝日休日以外に選択不可の日付を設定する場合は、この設定が使えます。残念なことに、is_disabledを1とするとツールチップ（休日名称）が表示されないようです。
Sample Calendarにて紹介されていますが、プラグインを使わずJavaScriptでコーディングして制御することも可能です。
日付ピッカーのdayFormatterとして、ファンクションを定義します。日付ピッカーが扱う日付の数だけ、dayFormatterが呼び出されます。
ページ・アイテムとしてP1_DATE3を作成し、日本の休日を表示するdayFormatterを定義してみます。
AjaxコールバックGET_HOLIDAYSを作成します。ソースのPL/SQLコードは以下になります。
ページ・プロパティのページ・ロード時に実行に以下を記述します。
同じ動作をするdayFormatterの実装ができました。
APEX 22.2の新しい日付ピッカーの説明は以上になります。
dayFormatterについて説明するためにJavaScriptのコードを書いてみましたが、Oracle APEXのプラグインのコードは参照することができます。
プラグインのソースにサーバー側のPL/SQLコードが記述されています。
クライアントにロードするJavaScriptなどは、ファイルとして作成されます。
内容を見た上で、使うかどうか判断できます。サポートはありませんが、オラクル社の公式のGitHubから提供されているプラグインで、自分の方が良いものが作れる思えるようなものは無いと思います。
今回作成したAPEXアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/japanese-holidays.zip
Oracle APEXのアプリケーション作成の参考になれば幸いです。
追記
CSSクラス
is-disabledは以下のように定義されています。
.a-DatePicker-calendar td.is-disabled {
--a-datepicker-calendar-day-pointer: var(--a-datepicker-calendar-day-disabled-pointer, not-allowed);
--a-datepicker-calendar-day-opacity: var(--a-datepicker-calendar-day-disabled-opacity, .5);
--a-datepicker-calendar-day-font-weight: var(--a-datepicker-calendar-day-disabled-font-weight, 400);
pointer-events: none;
}
pointer-eventsとしてnoneが設定されているため、日付の（休日として）選択を無効化するとツールチップも表示されません。ツールチップ（つまり祝日名）を表示するにはpointer-eventsをautoに変更します。
具体的にはページ・プロパティのCSSのインラインに、以下を記述します。
.a-DatePicker-calendar td.is-disabled {
pointer-events: auto;
}
CSSの定義を変更することにより、日付を選択不可にしてもツールチップが表示されます。
