IM-BloomMaker 日付入力の preserveTime プロパティを利用して時刻入力に同一の変数を指定する方法

このCookBookでは、2020 Winter でリリースした「日付入力」エレメントと、2022 Winterでリリースした「時刻入力」エレメントを同一の変数に対して利用する方法を説明します。

「日付入力」エレメントの preserveTime プロパティを有効にすることで、日付を入力した時に変数の時刻情報が保持されます。

完成イメージ

「日付入力」エレメント、「時刻入力」エレメント、それぞれから入力したデータを同一の変数に反映させます。

レシピ

1. 変数を作成する
2. エレメントを配置する
3. エレメントのプロパティを設定する

1. 変数を作成する

IM-BloomMakerのデザイン編集画面を開きます。

日付・時刻型の変数を作成し、任意の値を設定してください。

2. エレメントを配置する

パレットから以下のエレメントを配置します。

• フォーム部品(Bulma) - フィールド
• フォーム部品(Bulma) - テキスト表示

• フォーム部品(Bulma) - フィールド
• フォーム部品(Bulma) - 日付入力
• フォーム部品(Bulma) - 時刻入力

今回は、変数 $variable.date に格納される値をわかりやすくするために、「テキスト表示」エレメントを配置しています。
また、見た目を整えるために、「日付入力」エレメント、「時刻入力」エレメントが配置された「フィールド」エレメントの addon プロパティを addons に設定しています。

3. エレメントのプロパティを設定する

• 「テキスト表示」エレメントのプロパティを以下のように設定します。
  • value プロパティ：$variable.date
  • size プロパティ：medium（見やすくするためにサイズを大きくしています。）

• 「時刻入力」エレメントのプロパティを以下のように設定します。
  • value プロパティ：$variable.date

• 「日付入力」エレメントのプロパティを以下のように設定します。
  • value プロパティ：$variable.date
  • preserveTime プロパティ：true

「日付入力」エレメントの preserveTime プロパティは、日付入力時に時刻を保持するかどうかを指定するプロパティです。
preserveTime プロパティを有効にすることで、「日付入力」エレメントと「時刻入力」エレメントに入力した値がそれぞれ $variable.date へ保持されます。

preserveTime プロパティが無効になっていると、以下のように日付入力時に、$variable.date の時刻部分に「ログインユーザのタイムゾーンにおける 00:00:00」が格納されます。

「日付入力」エレメントと「時刻入力」エレメントに同一の変数を指定する場合はご注意ください。

動作確認

プレビュー画面を開きます。
「日付入力」エレメント、「時刻入力」エレメント、それぞれから入力したデータが変数に反映されることが確認できます。

おまけ

「時刻入力」エレメントの showSeconds プロパティを有効にすると、以下のように「時・分・秒」まで表示、入力できるようになります。

「秒」の値も利用したい方は、こちらのプロパティもご利用ください。