2022年7月15日金曜日

日付ピッカーにて日本の祝日を選択不可にする

 日付ピッカーで特定の日付を選択できないようにするには?という質問があったので、試しに実装してみました。日本の祝日を選択不可にします。

最初に日本の祝日の情報をデータベースにロードします。以下のスクリプトを実行します。

SQLワークショップSQLスクリプトで実行すると良いでしょう。実行すると表HOLIDAYSが作成されます。

日付ピッカーを実装するアプリケーションを作成します。

アプリケーション作成ウィザードにて、空のアプリケーションを作成します。名前日本の祝日とします。

デフォルトのまま、アプリケーションの作成を実行します。


アプリケーションが作成されたら、ページ・デザイナにてホーム・ページを開きます。

テストに使用するページ・アイテムを作成します。

識別名前P1_DAYタイプとして日付ピッカーを選択します。ラベル日付の選択とします。


選択を禁止する日付の情報を保持するページ・アイテムを作成します。

識別名前P1_HOLIDAYSタイプとして非表示を選択します。


ページ・アイテムP1_HOLIDAYSを初期化するプロセスを作成します。

レンダリング前のヘッダーの前にプロセスを作成します。識別の名前を祝日の初期化とし、コードとして、以下を記述します。



ここで生成しているJSONオブジェクト(となる文字列)を、日付ピッカーにプロパティdayMetaDataとして設定します。

ページのロード時に、日付ピッカーを初期化するJavaScriptコードを実行します。動的アクションを作成します。

ページのロードで動的アクションを作成します。識別名前日付ピッカーの初期化とします。


アクションJavaScriptコードの実行を選択し、設定コードとして以下を記述します。
let elem = document.getElementById("P1_DAY");
let dm = JSON.parse(apex.items.P1_HOLIDAYS.value);
elem.setProperty("dayMetaData", dm);

以上で完成です。アプリケーションを実行すると、記事の先頭のGIF動画のように動作します。

ページ・アイテムのタイプによっては(例えばリッチ・テキスト・エディタなど)、プロパティ詳細JavaScript初期化コードの設定が含まれます。このプロパティがあるコンポーネントであれば、初期化コードを実行するにあたって動的アクションを作成する必要がなくなります。


日付ピッカーはOracle JETにて提供されているコンポーネントです。

色々な機能が提供されているようですが、活用するためにはOracle JETのリファレンスを参照する必要があります。なかなか一筋縄ではいかなそうです。

https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html

以上で、今回の記事は終了です。

今回作成したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/disable-japanese-holidays.sql

Oracle APEXのアプリケーション作成の参考になれば幸いです。