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をインストールして確認してみます。
Plug-inにある日付ピッカーには、米国の休日が設定されています。
設定のLoad fromとしてICS File（他にSQL Queryを選択できます）、URL for ICS fileに休日が設定されたiCal（ics）ファイルを指定しています。
適用する日付ピッカーのページ・アイテムは、影響を受ける要素に指定します。
この動的アクション・プラグインはapex.oracle.comのソリューションのアプリケーションとプラグインからダウンロードできます。
プラグインのダウンロードは、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を試してみます。
内閣府のサイトから、国民の祝日をCSV形式でダウンロードします。
syukujitsu.csvがダウンロードされます。
SQLワークショップのデータ・ワークショップを使って、CSVを表にロードします。
データのロードを選択します。
ダウンロードしたsyukujitsu.csvを、アップロードするファイルとして選択します。
ロード先は新規表とし、表名はSYUKUJISTUとします。
祝日の日付をDATE型で読み込むために、構成を開きます。
列名国民の祝日_休日月日の列タイプをDATEに変更し、書式マスクにYYYY/MM/DDを設定します。
変更の保存をクリックします。
以上でデータのロードを実行します。
データのロードが完了したら、準備は完了です。
ページ・アイテムP1_DATE2を作成し、動的アクションのTRUEアクションも新たに作成します。初期化に使用するプラグインの設定のLoad fromをSQL Queryに設定します。
SQL Sourceは以下になります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| select | |
| trunc("国民の祝日_休日月日") as start_date, | |
| trunc("国民の祝日_休日月日") as end_date, | |
| 'u-danger-text' as css_class, | |
| "国民の祝日_休日名称" as tooltip, | |
| -- 0 = 選択可能, 1 = 選択不可 | |
| 0 as is_disabled | |
| from | |
| syukujitsu |
国民の祝日休日以外に選択不可の日付を設定する場合は、この設定が使えます。残念なことに、is_disabledを1とするとツールチップ（休日名称）が表示されないようです。
Sample Calendarにて紹介されていますが、プラグインを使わずJavaScriptでコーディングして制御することも可能です。
日付ピッカーのdayFormatterとして、ファンクションを定義します。日付ピッカーが扱う日付の数だけ、dayFormatterが呼び出されます。
ページ・アイテムとしてP1_DATE3を作成し、日本の休日を表示するdayFormatterを定義してみます。
AjaxコールバックGET_HOLIDAYSを作成します。ソースのPL/SQLコードは以下になります。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| declare | |
| l_clob clob; | |
| begin | |
| select | |
| -- json_object('holidays' value | |
| json_arrayagg( | |
| json_object('day' value to_char("国民の祝日_休日月日",'YYYY-MM-DD'), 'name' value "国民の祝日_休日名称") | |
| ) | |
| -- ) | |
| into l_clob | |
| from syukujitsu where "国民の祝日_休日月日" >= (sysdate - 365); | |
| -- データが多すぎるとエラーになるので、１年前の休日に限定。 | |
| htp.p(l_clob); | |
| end; |
ページ・プロパティのページ・ロード時に実行に以下を記述します。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let result = apex.server.process("GET_HOLIDAYS"); | |
| result.done( (data) => { | |
| window.holidays = data; | |
| console.log("holidays loaded."); | |
| // | |
| apex.item("P1_DATE3").dayFormatter = (pDate) => { | |
| const d = window.holidays.find(e => e.day == pDate); | |
| if (d != null) { | |
| return { | |
| disabled: false, // またはtrue | |
| class: "u-danger-text", | |
| tooltip: d.name | |
| }; | |
| } | |
| } | |
| apex.item("P1_DATE3").refresh(); | |
| }); |
同じ動作をする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のアプリケーション作成の参考になれば幸いです。
追記
.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;
}具体的にはページ・プロパティのCSSのインラインに、以下を記述します。
.a-DatePicker-calendar td.is-disabled {
pointer-events: auto;
}
CSSの定義を変更することにより、日付を選択不可にしてもツールチップが表示されます。
完
