JavaScriptライブラリ利用_複数日選択カレンダー

!++++

Ver.6　[ 機能を見る ] [ 機能設定を見る ]
※Ver5のサンプルは用意しておりません。

!----

1. はじめに

外部JavaScriptライブラリ「Air Datepicker」を利用した複数日選択カレンダーのサンプルです。

選択した日付は「YYYY/MM/DD;YYYY/MM/DD」形式で項目へ反映します。
また、3日以上連続する日付は「YYYY/MM/DD-YYYY/MM/DD」形式にまとめて反映します。

2. 利用条件

Air Datepicker の技術情報については、公式サイト（https://air-datepicker.com/）を参照してください。

3. サンプル機能の内容と確認ポイント

本サンプルでは、CSS設定でAir Datepickerを読み込み、Client-side JavaScriptを使用して、STYLE CLASSを設定した項目へ複数日選択カレンダーを適用します。

選択した日付は、OKボタン押下時に以下の形式へ変換し、対象項目へ反映します。

• 個別の日付：「YYYY/MM/DD」
• 3日以上連続する日付：「YYYY/MM/DD-YYYY/MM/DD」
• 複数の値：セミコロン（;）区切り

設定の内容は次の通りです。

• 事前準備（明細ブロックの準備）
  1. 日付を反映する項目を文字列型で作成し、項目情報のSTYLE CLASS（データセル）に「multi-date-input」を設定します。
     ※日付型の項目にはTALON標準のカレンダーが適用されるため、本サンプルでは文字列型を使用します。
      
• CSSの設定
  1. Air DatepickerライブラリのCSSとJavaScriptを読み込みます。
      
• Client-side JavaScriptの設定
  1. resizeContents_end() にて、STYLE CLASSを設定した対象項目にAir Datepickerを適用します。
  2. 画面上に表示しない制御用項目を生成し、Air Datepickerと連携します。
     カレンダー上では日付を選択し、対象項目への反映はOKボタン押下時に行います。
  3. カレンダーを開く際は、対象項目の現在値を解析し、選択状態を復元します。
  4. OKボタン押下時に選択日付を整形し、対象項目へ反映します。

🔍 確認いただけるポイント

1. 対象項目をクリックすると、複数日を選択できるカレンダーが表示されること
2. 複数の日付を選択してOKボタンを押すと、選択した日付がセミコロン区切りで対象項目へ反映されること
3. 日以上連続する日付を選択した場合、「開始日-終了日」形式にまとめて反映されること
4. 値が設定済みの項目を再度選択した場合、カレンダー上に選択状態が復元されること
5. 行追加後の項目でも同様にカレンダーを利用できること

4. 画面イメージ

!++++

使用したコード一覧

• resizeContents_end()

!----