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

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

関連記事

IM-BloomMaker 数値入力(フォーマット)の独自のプロパティの紹介

2022 Winter にリリースした「数値入力(フォーマット)」エレメントは、数値ボックスを表示するエレメントです。3桁区切りや0埋めのフォーマットを利用できます。この CookBook では、「数 …

IM-BloomMaker フォーム部品(Bulma)のグループ化と結合の使い方

このCookBookでは、intra-mart Accel Platform 2020 Summer から利用可能になった コンテンツ種別「Bulma」の「フォーム部品(Bulma)」を使用したグルー …

ガントチャートテンプレートを使ってみる

intra-mart Accel Platform 2023 Autumn に「ガントチャートテンプレート」が提供されました。この CookBook では、ガントチャートテンプレートとマスタメンテナン …

IM-BloomMaker でリモートワークの報告メールを送信するアプリを作ってみた

はじめに IM-BloomMaker と IM-LogicDesigner で「リモートワークの報告メールを送信するアプリ」を作成したので、公開します。 新型コロナウィルスによる緊急事態宣言を受けて、 …

no image

IM-BloomMaker ページのトップに戻るボタンの作り方

このCookBookでは、IM-BloomMaker でページのトップに戻るボタンの作り方について紹介しています。 今回紹介する方法は、intra-mart Accel Platform 2022 S …