CookBook

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」が格納されます。

※preserveTime プロパティが無効な場合の動作

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

動作確認

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

おまけ

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

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

-CookBook
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

スレッドダンプの取り方

このCookBookでは、スレッドダンプの取り方について紹介しています。 以下に手順を説明しますが、スレッドダンプは必ず問題の事象が発生している時に取得してください。 例えば、動作が重い・非同期処理が …

IM-BloomMaker で作成した画面で、入力項目の値によってエレメントの表示・非表示を切り替える方法

このCookBookでは、IM-BloomMakerで入力系エレメントの入力値によってエレメントの表示/非表示を切り替える方法について紹介しています。 実際にサンプル画面を作成しながら解説を行います。 …

BloomMakerでワークフローの一括承認画面を作成する

このCookBookでは、BloomMakerで、ワークフローの一括承認画面を作成してみました。 本稿で紹介のサンプルのように、BloomMakerを利用することで、ちょっとした要件に応じた画面が簡単 …

no image

OAuth2.0 の アクセストークンを Google から取得する方法

このクックブックでは、OAuth2.0 の アクセストークンを Google から取得する方法を説明します。 intra-mart Accel Platformでは、OAuth2.0 の アクセストー …

no image

ワークスペースとファイルライブラリ機能との連携

このCookBookでは、「intra-mart Accel Collaboration」の機能の1つであるワークスペースと「intra-mart Accel Collaboration」のファイルラ …