IM-BloomMaker 日付入力（カレンダー）エレメントのご紹介

この CookBook では、2025 Autumn でリリースされた「日付入力（カレンダー）」エレメントの基本的な操作方法、既存の Bulma 及び imds 日付入力エレメントにはない新機能をご紹介いたします。

「日付入力（カレンダー）」エレメントは、intra-mart Accel Platform のカレンダー情報を表示することができるエレメントです。
従来はコンテンツ種別 imui の日付入力エレメントのみがカレンダー情報を表示できる機能を持っていましたが、2025 Autumn では Bulma および imds においてもカレンダー情報を表示できる日付入力（カレンダー）エレメントを用意しました。

サンプルコンテンツのインポートファイル

この CookBook で使用するサンプルコンテンツのインポートファイルです。
IM-BloomMaker のインポート画面からインポートしてください。
intra-mart Accel Platform 2025 Autumn 以降のバージョンで利用できます。

cookbook267463_im_bloommaker.zip

基本的な操作方法

• 上記の「サンプルコンテンツのインポートファイル」のcookbook267463_im_bloommaker.zipをダウンロードし、IM-BloomMaker のインポート画面からインポートしてください。
  インポートの方法は以下のドキュメントを参照してください。
  IM-BloomMaker for Accel Platform IM-BloomMaker ユーザ操作ガイド
• コンテンツ一覧画面を表示してください。
• コンテンツツリーから「intra-mart CookBook」＞「im_cookbook_267463」＞「im_cookbook_267463」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。（※この cookbook ではコンテンツ種別 Bulma の日付入力（カレンダー）エレメントを使用します。）
• デザイナ画面が開いたら、プレビューをクリックしてください。

日付の手入力

既存の「日付入力」エレメントと同様、日付を直接入力することで設定が可能です。

日付ピッカーの操作方法

日付の右横に表示されているカレンダーアイコンをクリックして日付ピッカーを開いてください。

日付選択ビュー

• 任意の日付セルをクリックすることで日付の選択ができます。
• ①「今日」をクリックすると今日の日付が設定されます。
• ②「削除」をクリックすると日付が削除されます。
• ③「閉じる」をクリックすると日付ピッカーが閉じます。
• ④「先月（<）」「来月（>）」をクリックすることで、月の移動ができます。

月選択ビュー

• 日付選択ビューで、ナビゲーションタイトルをクリックしてください。

• 月選択ビューに切り替わります。
• 任意の月をクリックすると、その月の日付選択ビューに切り替わります。
• 月選択ビューで「昨年（<）」「来年（>）」をクリックすることで、年の移動ができます。

年選択ビュー

• 月選択ビューで、ナビゲーションタイトルをクリックしてください。

• 年選択ビューに切り替わります。
• 任意の年をクリックすると、その年の月選択ビューに切り替わります。
• 年選択ビューで「前の10年（<）」「次の10年（>）」をクリックすることで、10年単位の移動ができます。

新機能のご紹介

ここでは、既存の Bulma および imds 日付入力エレメントにはない、新しく追加された機能についてご紹介します。

intra-mart Accel Platform のカレンダー情報を表示する機能 （calendarId プロパティ）

calendarId プロパティは、日付ピッカーに表示するカレンダーの「カレンダーID」を指定します。
会社の営業日カレンダー等を利用したい場合は、calendarId プロパティを利用してください。

設定方法

（１）「im_cookbook_267463」のデザイナ画面を開いてください。
（またはコンテンツ一覧画面を開き、コンテンツツリーから「intra-mart CookBook」＞「im_cookbook_267463」＞「im_cookbook_267463」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。）

（２）日付入力要素（カレンダー）エレメントの calendarId プロパティを確認してください。
変数値に $env.accountContext.calendarId が設定されています。（任意のカレンダーIDを指定していただいても構いません。）

（３）プレビュー画面を開いてください。

（４）日付ピッカーを開くと、アカウントに設定したカレンダーの休日や祝日情報が反映されています。
祝日にマウスオーバーすると、ツールチップで祝日が表示されます。

日付の選択形式を設定する機能 （editMode プロパティ）

editMode プロパティは日付の設定方法を指定することができます。
例えば、不正な日付（例：2025/09/31）の誤入力を防ぐ目的で、日付ピッカーからの選択のみに制限することができます。

設定方法

（１）「im_cookbook_267463」のデザイナ画面を開いてください。
（またはコンテンツ一覧画面を開き、コンテンツツリーから「intra-mart CookBook」＞「im_cookbook_267463」＞「im_cookbook_267463」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。）

（２）日付入力要素（カレンダー）エレメントの editMode のプロパティ値を Calendar に設定してください。

（３）プレビュー画面を開いてください。

（４）日付ピッカーからのみ、日付を選択することができます。（日付の手入力はできません）

（５）再度、「im_cookbook_267463」のデザイナ画面を開いてください。

（６）editMode のプロパティ値を Hybrid に設定してプレビュー画面を開いてください。

（７）手入力および日付ピッカーで日付を設定することができます。

変数のタイムゾーンに指定された日付を入力欄に表示させる機能 （preserveTimeZoneDate プロパティ）

preserveTimeZoneDate プロパティは、変数に指定されたタイムゾーンにおける日付を日付入力欄に表示するかどうかを指定します。
従来の日付入力エレメントでは、タイムゾーン付きの日時を表示しようとすると、タイムゾーンの違いにより表示される日付が異なる場合がありました。

新しく追加された日付入力（カレンダー）エレメントでは、変数に指定されたタイムゾーンで日付を表示できます。

設定方法

※ユーザのロケールは GMT+09:00 日本 / 東京 を想定しています。その他のロケールが設定されている場合、ご紹介する内容の通りに動作しない場合があります。

（１）「im_cookbook_267463」のデザイナ画面を開いてください。
（またはコンテンツ一覧画面を開き、コンテンツツリーから「intra-mart CookBook」＞「im_cookbook_267463」＞「im_cookbook_267463」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。）

（２）フィールドエレメントを選択して、showLabel プロパティにチェックを入れてください。

（３）フィールドラベルエレメントを選択して、label プロパティの変数値に $variable.key1 を指定してください。

（４）日付入力要素（カレンダー）エレメントを選択して value プロパティの変数に $variable.key1 を指定してください。

（５）日付入力要素（カレンダー）エレメントを選択して preserveTimeZoneDate プロパティにチェックを入れてください。

（６）プレビュー画面を開いてください。

（７）変数に指定した日付がそのまま使用され、日付入力欄には「2025/09/30」と表示されます。

カレンダーアイコンの設定機能

カレンダーアイコンエレメントは日付ピッカーを開くためのアイコンです。

カレンダーアイコンの表示・非表示設定 （showCalendarIcon プロパティ）

showCalendarIcon プロパティは、カレンダーアイコンの表示・非表示を設定します。

設定方法

（１）「im_cookbook_267463」のデザイナ画面を開いてください。
（またはコンテンツ一覧画面を開き、コンテンツツリーから「intra-mart CookBook」＞「im_cookbook_267463」＞「im_cookbook_267463」のコンテンツを選択し、「デザイン編集」ボタンをクリックしてください。）

（２）日付入力（カレンダー）エレメントを選択して、showCalendarIcon プロパティ値を変更することで、アイコンの表示・非表示を設定することができます。

アイコンの種類設定 （iconClass プロパティ）

iconClass プロパティは、カレンダーアイコンの種類を設定します。

設定方法

※上記 showCalendarIcon のプロパティにチェックをつけてください。

（１）カレンダーアイコンエレメントを選択して、iconClass プロパティに任意の値（例：fas fa-calendar-alt）を指定してください。
カレンダーアイコンのデザインが変わります。

アイコンの色設定 （color プロパティ）

color プロパティは、カレンダーアイコンの色を設定します。

設定方法

（１）カレンダーアイコンエレメントを選択して、color プロパティに任意の値（例：primary）を指定してください。
カレンダーアイコンの色が変わります。