アダプティブ カード デザイナーについてご紹介するシリーズ記事です。
7回目は、アダプティブ カード デザイナーで利用できるパーツの1つである「Input.Date」をご紹介します。
はじめに
過去のシリーズ記事については以下をご覧ください。
- アダプティブ カード デザイナーの使い方：その1 操作画面の説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その2 操作ボタンの説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その3 操作方法の説明 - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その4 アダプティブ カードを新規作成してみる - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その5 パーツの紹介（CodeBlock） - JBS Tech Blog
- アダプティブ カード デザイナーの使い方：その6 パーツの紹介（ColumnSet） - JBS Tech Blog
また、2026年6月時点で、2つのアダプティブ カード デザイナーが存在しています。
本記事で記載するアダプティブ カード デザイナーのリンクは、以下からご確認ください。
Input.Dateとは
「Input.Date」は、アダプティブ カード内にカレンダーを表示させ、ユーザーに日付を選択できるようにするパーツです。
以下画像は、「Input.Date」を用いてカレンダーをアダプティブ カードに表示させたものです。
なお、「Input.Date」だけでは選択したデータを活用することが出来ないため、「Action.Submit」など、データを送信するパーツと組み合わせる必要があります。
設定可能箇所
「Input.Date」で設定できるものは、以下5つのカテゴリに分かれています。
なお「Responsive layout」、「Layout」はこちらの記事で記載している内容と同様のため、本記事では記載を割愛します。
- Input.Date
- Responsive layout
- Layout
- Validation
- When the value changes
Input.Date
「Input.Date」は、カレンダーそのものに対する設定部分です。
ここでは「ID」、「Label」、「Placeholder」、「Default value」をご紹介します。
Id
「Id」は入力値を識別するための一意の値です。
ユーザーが入力した値は、この「Id」を使って取得されます。従って、「Input.Date」を設定する際は必ず設定をしてください。
※ 入力する値は任意の値で問題ありません。英数字だけでなく、日本語でも設定可能です。
Label
「Label」は、カレンダーの見出しを入力する箇所です。
ここで入力した内容が、カレンダー上部に表示されます。
例として、「Label」部分に「作業希望日」と入力します。
すると、カレンダーの上部に「作業希望日」と表示されていることが分かります。
Placeholder
「Placeholder」はカレンダーで日付を選択していないときに、表示されるガイド文を入力する箇所です。
例として、「Placeholder」部分に「日付を選択してください」と入力します。
すると、カレンダーを選択する部分に「日付を選択してください」と表示されていることが分かります。
Default value
「Default value」は、表示するカレンダーの初期値として表示される日付を指定する箇所です。
ここに記載する形式は注意が必要です。アダプティブ カード デザイナー上では、以下のように入力する必要があります。
「曜日」、「月」は英語での略称で記載し、日本時間を表したい場合、タイムゾーンでは「（日本標準時）」と入力します。
曜日 月 日 年 時刻 タイムゾーン
例として、2026年6月1日を「Default value」にする場合、以下のように記載します。
Mon Jun 01 2026 00:00:00 GMT+0900 (日本標準時)
すると、カレンダーを選択する部分に「2026年6月1日」と表示されていることが分かります。
「Placeholder」に設定された内容よりも優先で表示されます。
また、アダプティブ カードのJSONでは、2026-06-30 のような「yyyy-MM-dd」形式で表示されます。
※ アダプティブ カード デザイナーでの入力表記と異なる点にお気を付けください。
Validation
「Validation」は入力値を検証する設定部分です。
ここでは「Required」、「Error message」をご紹介します。
Required
「Required」は日付入力を必須にするかどうかを指定できる箇所です。
以下画像は「Required」にチェックを付けていない状態です。
一方、以下画像は「Required」にチェックを付けた状態です。
赤い※印が付いて、入力が必須になっていることが分かります。
Error message
「Error message」は、「Required」を有効にしているにもかかわらず日付が未入力だった場合、表示させるメッセージを入力する箇所です。
例として、「Error message」部分に「日付選択は必須です」と入力します。
アダプティブ カードで日付を選択せずに送信しようとすると、入力したメッセージが表示されていることが分かります。
When the value changes
「When the value changes」は、「Input.Date」の値が変更された際に実行するアクションの設定部分です。
ユーザーが日付を選択したタイミングでカード内容を更新したり、別の入力項目を表示したりすることができます。
上級者向けの内容となるため本記事では記載を割愛し、別の機会でご紹介します。
終わりに
アダプティブ カード デザイナーの使い方シリーズの7回目として、利用者から日付データを取得したい場合に便利な「Input.Date」についてご紹介しました。
ご自身で「Input.Date」を利用する際の参考になれば幸いです。
