日付選択 date-picker-adaptive-forms-core-component

アダプティブフォームの日付選択コンポーネントは、ユーザーがカレンダーから日付を選択したり、特定の形式で手動で日付を入力したりできるユーザーインターフェイス要素です。日付選択コンポーネントは、様々な形式、検証およびデフォルト値を持つように設定できます。

例

使用方法 reasons-to-use-drop-date-picker

アダプティブフォームに日付選択を含めると便利な理由はいくつかあります。以下に例を示します。

  • 利便性:ユーザーはテキストフィールドに日付を手動で入力しなくても、カレンダーから簡単に日付を選択できます。これにより、時間を節約してエラーを減らすことができます。

  • ユーザーエクスペリエンス:ユーザーが日付を選択する際に直感的で明確な方法を提供することで、より使いやすいフォームを作成できます。

  • データ分析:様々なソースからデータを収集して分析したり、追加の処理を行うための入力として使用したりできます。

  • イベントの管理:イベント管理 web サイトでイベントの日付を選択できます。

  • 予約:予約サイトで使用すると、チェックイン日とチェックアウト日を選択できます。

  • 日付フォーマット:日付が表示、入力される形式を変更できます。フォーム全体で日付形式の一貫性を確保して、一貫性のあるユーザーエクスペリエンスを提供します。

バージョンと互換性 version-and-compatibility

アダプティブフォームのアコーディオンコアコンポーネントは、Cloud Service のコアコンポーネント 2.0.4 および AEM 6.5.16.0 Forms 以降のコアコンポーネント 1.1.12 の一部として 2023年2月にリリースされました。次の表に、サポートされているすべてのバージョン、AEM の互換性、対応するドキュメントへのリンクを示します。

コンポーネントのバージョン
AEM as a Cloud Service
AEM 6.5.16.0 Forms 以降
v1
リリース 2.0.4 以降と互換性あり
リリース 1.1.12 以降、2.0.0 未満と互換性があります。

コアコンポーネントのバージョンとリリースについて詳しくは、コアコンポーネントのバージョンドキュメントをご覧ください。

技術的詳細 technical-details

アダプティブフォームの日付選択コアコンポーネントの最新情報については、GitHub のテクニカルドキュメントをご覧ください。コアコンポーネントの開発について詳しくは、コアコンポーネント開発者向けのドキュメントをご覧ください。

設定ダイアログ configure-dialog

「設定」では、訪問者による日付選択の操作を簡単にカスタマイズできます。また、シームレスなユーザーエクスペリエンスを実現するために、簡単に日付選択オプションを定義できます。

「基本」タブ basic-tab

「基本」タブ

  • 名前 - 名前によって、ルールエディターでコンポーネントを一意に識別できます。名前文字列には特殊文字とスペースを使用できません。

  • タイトル - タイトルは、アダプティブフォームのコンポーネントの上部に表示される文字列です。タイトルによって、アダプティブフォームのツリー構造内のコンポーネントを一意に識別できます。タイトルを追加しない場合、コンポーネントの名前がタイトルテキストの代わりに表示されます。

  • タイトルを非表示 - アダプティブフォーム内のコンポーネントタイプのタイトルを非表示にするには、このオプションを選択します。

  • プレースホルダーテキスト - フォームコンポーネント内のプレースホルダーテキストとは、入力フィールド内に表示される短いラベルまたはプロンプトのことで、そのフィールドに入力する必要のある情報の種類に関するヒントとしてユーザーに表示します。ユーザーがフィールドへの入力を開始するとプレースホルダーテキストが消え、フィールドが空のままの場合は再び表示されます。ユーザーに視覚的なキューを提供しますが、フィールドの永続的なラベルや値としては機能しません。

  • 非連結フォーム要素としてマーク:どのスキーマにもリンクされていないフォームフィールドを設定する場合は、このオプションを選択します。このオプションを使用すると、データソースを更新せずにデータを保存できます。また、標準のデータベース統合とは別に、カスタム方法でデータを処理できます。

  • コンポーネントを非表示 - フォームでコンポーネントを非表示にするには、このオプションを選択します。 このコンポーネントは、他の目的(ルールエディターでの計算に使用するなど)にも利用できます。 これは、ユーザーが表示する必要のない情報や直接変更した情報を保存する必要がある場合に役立ちます。

  • コンポーネントの無効化 - コンポーネントを無効にする場合は、このオプションを選択します。 エンドユーザーは、無効になっているコンポーネントをアクティブにしたり、編集したりすることはできません。 ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的(ルールエディターでの計算に使用するなど)にも利用できます。

  • 読み取り専用 - コンポーネントを編集不可にするには、このオプションを選択します。 ユーザーはフィールドの値を表示できますが、変更することはできません。 このコンポーネントは、他の目的(ルールエディターでの計算に使用するなど)にも利用できます。

  • デフォルトの日付 - このオプションを使用すると、フォームフィールドに日付を追加できます。 入力した日付は、デフォルトでコンポーネントの場所に表示されます。ユーザーが日付を入力しない場合、この値はフォームの送信時に送信されます。「無効なコンポーネント」または「読み取り専用コンポーネント」が選択されている場合、デフォルトの日付が画面に表示され、フォームの送信時に送信されます。

「検証」タブ validation-tab

「検証」タブ

  • 必須 - コンポーネントをアダプティブフォームに表示する場合は、このオプションを選択します。 オプションを選択した後、フォームの送信を続行する前に選択を行う必要があります。このオプションが選択されていると、「基本」タブの「コンポーネントを非表示」または「コンポーネントの無効化」選択できません。

  • エラーメッセージ - このオプションを使用すると、「必須」チェックボックスがオンになっており、フォームフィールドが空白の場合に表示されるメッセージを入力できます。

  • スクリプト検証メッセージ - スクリプトの検証が失敗した場合に表示するメッセージを入力できます。

  • 最短の日付 - 必要となる最短の日付を指定できます。「最短の日付」で指定した日付より前の日付を入力すると、エラーメッセージが画面に表示されます。最短エラーメッセージ ​ダイアログボックスでは、カスタムのエラーメッセージを追加できます。

  • 最短エラーメッセージ - 最短エラーメッセージ ​ダイアログボックスでは、「最短の日付」オプションで指定した日付よりも前の日付を入力した場合に表示されるエラーメッセージを追加できます。

  • 最長の日付 - 必要となる最長の日付を指定できます。「最長の日付」で指定した日付より後の日付を入力すると、エラーメッセージが画面に表示されます。最長エラーメッセージ ​ダイアログボックスでは、カスタムのエラーメッセージを追加できます。

  • 最長エラーメッセージ - 最長エラーメッセージ ​ダイアログボックスでは、「最長の日付」オプションで指定した日付より後の日付を入力した場合に表示されるカスタムのエラーメッセージを追加できます。

「ヘルプコンテンツ」タブ help-content-tab

「ヘルプコンテンツ」タブ

  • 短い説明 - 短い説明は、特定のフォームフィールドの目的に関する追加の情報や説明を提供する簡単な説明文です。これにより、ユーザーは、フィールドに入力するデータの種類を理解しやすくなります。また、入力された情報が有効で目的の条件を満たしていることを確認できるように、ガイドラインや例を提供できます。デフォルトでは、短い説明は非表示になっています。 「短い説明を常に表示」オプションを有効にすると、コンポーネントの下に短い説明が表示されます。

  • 短い説明を常に表示 - このオプションを有効にすると、コンポーネントの下に短い説明が表示されます。

  • ヘルプテキスト - ヘルプテキストとは、フォームフィールドの正しい入力を支援するためにユーザーに提供される追加の情報やガイダンスのことです。コンポーネントの横に配置されているヘルプアイコン(i)をクリックすると表示されます。 ユーザーがフィールドの要件や制約を理解できるように設計されているヘルプテキストは、フォームフィールドのラベルやプレースホルダーテキストよりも詳細な情報を提供できます。また、フォームへの入力をより簡単かつ正確にするための提案や例を提供することも可能です。

「アクセシビリティ」タブ accessibility-tab

「アクセシビリティ」タブ

スクリーンリーダー用テキスト - スクリーンリーダー用テキストとは、視覚に障害のあるユーザーが使用する、支援テクノロジー(スクリーンリーダーなど)によって読み上げられる追加のテキストを指します。このテキストでは、フォームフィールドの目的に関するオーディオの説明が提供され、フィールドのタイトル、説明、名前および関連するメッセージ(カスタムテキスト)に関する情報を含めることができます。スクリーンリーダー用のテキストを使用すると、視覚に障害のあるユーザーを含むすべてのユーザーがフォームに確実にアクセスして、フォームフィールドとその要件を完全に理解できるようになります。

「形式」タブ format-tab

「形式」タブ

  • 表示形式 - ユーザーに表示される日付形式を表します。「タイプ」オプションを使用すると、ユーザーが日付形式を選択できるようになります。また、「タイプ」ドロップダウンメニューの「カスタム」オプションでは、日付形式をカスタマイズできます。

  • 形式を編集 - ユーザーが日付を編集できる日付形式を表します。「タイプ」オプションを使用すると、ユーザーが日付形式を選択できるようになります。また、「タイプ」ドロップダウンメニューの「カスタム」オプションを使用して、日付形式をカスタマイズできます。

  • 表示形式 - ユーザーに表示される日付形式を表します。「タイプ」オプションを使用すると、ユーザーは日付形式を選択できるようになります。また、「タイプ」ドロップダウンメニューの「カスタム」オプションを使用して、日付形式をカスタマイズできます。

  • 形式を編集 - ユーザーが日付を編集する日付形式を表します。「タイプ」オプションを使用すると、ユーザーは日付形式を選択できるようになります。また、「タイプ」ドロップダウンメニューの「カスタム」オプションを使用して、日付形式をカスタマイズできます。

デザインダイアログ design-dialog

デザインダイアログでは、日付選択コンポーネントの CSS スタイルを定義および管理できます。

「スタイル」タブ styles-tab

タブを使用して、コンポーネントの CSS スタイルの定義と管理を行います。アダプティブフォームの日付選択コアコンポーネントは、AEM のスタイルシステムをサポートしています。

「スタイル」タブ

  • デフォルトの CSS クラス:アダプティブフォームの日付選択コアコンポーネントのデフォルト CSS クラスを指定できます。

  • 許可されたスタイル:スタイルを表す名前と CSS クラスを指定することで、スタイルを定義できます。例えば、「bold text」という名前のスタイルを作成し、CSS クラス「font-weight: bold」を指定できます。アダプティブフォームエディターでアダプティブフォームにこれらのスタイルを使用または適用できます。スタイルを適用するには、アダプティブフォームエディターでスタイルを適用するコンポーネントを選択し、「プロパティ」ダイアログに移動して「スタイル」ドロップダウンリストから希望のスタイルを選択します。スタイルを更新または変更する必要がある場合は、デザインダイアログに戻り、「スタイル」タブでスタイルを更新して変更を保存します。

カスタムプロパティ

カスタムプロパティダイアログ

カスタムプロパティを使用すると、フォームテンプレートを使用してカスタム属性(キーと値のペア)をアダプティブフォームのコアコンポーネントに関連付けることができます。カスタムプロパティは、コンポーネントのヘッドレスレンディションのプロパティセクションに反映されます。これにより、カスタム属性値に基づいて適応する動的なフォーム動作を作成できます。例えば、開発者は、モバイル、デスクトップ、web プラットフォーム上にヘッドレスフォームコンポーネントの様々なレンディションをデザインできるので、幅広いデバイスでのユーザーエクスペリエンスが大幅に向上します。

  • グループ名:カスタムプロパティグループを識別する名前を指定できます。複数のカスタムプロパティグループを追加、削除または並べ替えることができます。カスタムプロパティグループを追加すると、次のオプションが表示されます。

    • キーと値のペア:各カスタムプロパティグループの「追加」ボタンをクリックすると、複数のカスタムプロパティ名とカスタムプロパティ値を追加できます。

    • 削除:タップまたはクリックすると、カスタムプロパティ名とカスタムプロパティ値を削除できます。

    • 並べ替え:タップまたはクリックしてドラッグすると、カスタムプロパティ名とカスタムプロパティ値の順序を並べ替えることができます。

「形式」タブ formats-tab

「形式」タブでは、デフォルトおよびカスタムの日付形式を指定できます。

「形式」タブ

関連記事 related-articles

関連トピック see-also

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c