날짜 선택기 구성 요소 date-picker-adaptive-forms-core-component

적응형 양식의 날짜 선택기 구성 요소는 사용자가 달력에서 날짜를 선택하거나 특정 형식으로 날짜를 수동으로 입력할 수 있도록 하는 사용자 인터페이스 요소입니다. 다른 형식 지정, 유효성 검사 및 기본값을 갖도록 날짜 선택기 구성 요소를 구성할 수 있습니다.

예

사용 reasons-to-use-drop-date-picker

적응형 양식에 날짜 선택기를 포함하는 것이 유익한 몇 가지 이유는 다음과 같습니다.

  • 편의성: 날짜 선택기 구성 요소를 사용하면 텍스트 필드에 날짜를 수동으로 입력하지 않고도 달력에서 날짜를 간편하게 선택할 수 있습니다. 이렇게 하면 시간을 절약하고 오류를 줄일 수 있습니다.

  • 사용자 경험: 날짜 선택기 구성 요소를 사용하면 사용자가 명확하고 직관적으로 날짜를 선택할 수 있으므로 양식을 보다 사용자 친화적으로 만들 수 있습니다.

  • 데이터 분석: 날짜 선택기 구성 요소를 사용하여 다양한 소스에서 데이터를 수집하고 분석하거나 추가 처리를 위한 입력으로 사용할 수 있습니다.

  • 이벤트 관리: 이벤트 관리 웹 사이트에서 날짜 선택기 구성 요소를 사용하여 이벤트 날짜를 선택할 수 있습니다.

  • 예약: 예약 웹 사이트에서 날짜 선택기 구성 요소를 사용하여 체크인 및 체크아웃 날짜를 선택할 수 있습니다.

  • 날짜 형식: 날짜 선택기 구성 요소를 사용하여 날짜가 표시되고 입력되는 형식을 수정할 수 있습니다. 일관된 사용자 경험을 위해 양식 전체에서 날짜 형식의 일관성을 유지해야 합니다.

버전 및 호환성 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

기본 탭

  • 이름 - 이름은 규칙 편집기에서 구성 요소를 고유하게 식별합니다. 이름 문자열에는 특수 문자나 공백이 포함되어서는 안 됩니다.

  • 제목 - 제목은 적응형 양식의 구성 요소 상단에 표시되는 문자열입니다. 제목은 적응형 양식의 트리 구조에서 구성 요소를 고유하게 식별합니다. 제목을 추가하지 않으면 제목 텍스트 대신 구성 요소의 이름이 표시됩니다.

  • 제목에 대해 서식 있는 텍스트 허용 - 이 기능을 사용하면 사용자가 굵게, 기울임꼴, 밑줄 친 텍스트, 다양한 글꼴, 글꼴 크기, 색상, 추가 옵션과 같은 기능을 통합해 일반 텍스트 제목의 서식을 지정하여 시각적 표현 및 사용자 정의를 향상할 수 있습니다. 더 큰 유연성과 창의적인 제어 기능으로 문서, 웹 사이트 또는 애플리케이션 내에서 제목을 돋보이게 할 수 있습니다.
    제목에 대해 서식 있는 텍스트 허용 확인란을 선택하면 구성 요소 제목의 스타일을 지정할 수 있는 서식 지정 옵션이 표시됩니다. 사용 가능한 모든 서식 옵션에 액세스하려면 전체 화면 아이콘 탭을 클릭하면 됩니다.

    서식 있는 텍스트 지원

  • 제목 숨기기 - 적응형 양식에서 구성 요소 유형의 제목을 숨기려면 이 옵션을 선택합니다.

  • 플레이스홀더 텍스트 - 양식 구성 요소의 플레이스홀더 텍스트는 입력 필드에 입력할 것으로 예상되는 정보 유형에 대한 힌트로 입력 필드 내에 표시되는 간단한 레이블 또는 프롬프트를 나타냅니다. 플레이스홀더 텍스트는 사용자가 필드에 입력을 시작하면 사라지고 필드가 비어 있으면 다시 나타납니다. 사용자에게 시각적인 단서를 제공하지만 필드에 대한 영구적인 레이블 또는 값으로 작동하지는 않습니다.

  • 바인드 참조 - 바인드 참조는 외부 데이터 소스에 저장되고 양식에서 사용되는 데이터 요소에 대한 참조입니다. 바인드 참조를 사용하면 데이터를 양식 필드에 동적으로 바인딩하여 양식이 데이터 소스의 최신 데이터를 표시하도록 할 수 있습니다. 예를 들어 바인드 참조를 사용하여 양식에 입력된 고객의 ID를 기반으로 고객의 이름과 주소를 양식에 표시할 수 있습니다. 바인드 참조를 사용하여 양식에 입력된 데이터로 데이터 소스를 업데이트할 수도 있습니다. 이러한 방식으로 AEM Forms를 사용하면 외부 데이터 소스와 상호 작용하는 양식을 만들어 데이터 수집 및 관리를 위한 원활한 사용자 경험을 제공할 수 있습니다.

  • 언바운드 양식 요소로 표시: 어떤 스키마에도 연결되지 않은 양식 필드를 구성하려면 이 옵션을 선택합니다. 이 옵션을 사용하면 데이터 소스를 업데이트하지 않고도 데이터를 저장할 수 있습니다. 또한 표준 데이터베이스 통합과 별도로 사용자 정의 방식으로 데이터를 처리할 수 있습니다.

  • 구성 요소 숨기기 - 양식에서 구성 요소를 숨기려면 이 옵션을 선택합니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다. 구성 요소 숨기기는 사용자가 보거나 직접 변경할 필요가 없는 정보를 저장해야 할 때 유용합니다.

  • 구성 요소 비활성화 - 구성 요소를 비활성화하려면 이 옵션을 선택합니다. 비활성화된 구성 요소는 활성 상태가 아니므로 최종 사용자가 편집할 수 없습니다. 사용자는 필드 값을 볼 수 있지만 수정할 수는 없습니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다.

  • 읽기 전용 - 구성 요소를 편집할 수 없도록 만들려면 이 옵션을 선택합니다. 사용자는 필드 값을 볼 수 있지만 수정할 수는 없습니다. 구성 요소는 다른 용도로(예: 규칙 편집기에서 계산에 사용) 계속 액세스할 수 있습니다.

  • 기본 날짜 - 이 옵션을 사용하면 양식 필드에 날짜를 추가할 수 있습니다. 입력한 날짜는 기본적으로 구성 요소 위치에 나타납니다. 사용자가 날짜를 입력하지 않으면 이 값이 양식 제출 시 함께 제출됩니다. 비활성화된 구성 요소 또는 읽기 전용 구성 요소 ​를 선택한 경우 기본 날짜가 화면에 표시되며 양식 제출 시 함께 제출됩니다.

유효성 검사 탭 validation-tab

유효성 검사 탭

  • 필수 - 적응형 양식에 구성 요소를 표시하려면 이 옵션을 선택합니다. 이 옵션을 선택하면 양식 제출을 진행하기 전에 선택을 해야 합니다. 이 옵션이 선택되어 있으면 기본 탭에서 구성 요소 숨기기 또는 구성 요소 비활성화 ​를 선택할 수 없습니다.

  • 오류 메시지 - 이 옵션을 사용하면 필수 확인란이 선택되어 있고 양식 필드가 비어 있는 경우 표시되는 메시지를 입력할 수 있습니다.

  • 스크립트 유효성 검사 메시지 - 이 옵션을 사용하면 스크립트 유효성 검사가 실패할 경우 표시할 메시지를 입력할 수 있습니다.

  • 최소 날짜 - 이 옵션을 사용하면 최소 필수 날짜를 입력할 수 있습니다. 최소 날짜에 지정된 날짜 이전의 날짜를 입력하면 화면에 오류 메시지가 표시됩니다. 최소 오류 메시지 대화 상자에서 사용자 정의 오류 메시지를 추가할 수 있습니다.

  • 최소 오류 메시지 - 최소 날짜 옵션에 지정된 날짜 이전의 날짜를 입력한 경우, 최소 오류 메시지 대화 상자를 사용하면 표시할 사용자 정의 오류 메시지를 추가할 수 있습니다.

  • 최소 날짜 제외 - 이 옵션을 사용하면 특정 범위 또는 날짜 집합에서 최소 날짜를 생략할 수 있습니다.

  • 최대 날짜 - 이 옵션을 사용하면 최대 필수 날짜를 입력할 수 있습니다. 최대 날짜에 지정된 날짜 이후의 날짜를 입력하면 화면에 오류 메시지가 표시됩니다. 최대 오류 메시지 대화 상자에서 사용자 정의 오류 메시지를 추가할 수 있습니다.

  • 최대 오류 메시지 - 최대 날짜 옵션에 지정된 날짜 이후의 날짜를 입력한 경우, 최대 오류 메시지 대화 상자를 사용하면 표시할 사용자 정의 오류 메시지를 추가할 수 있습니다.

  • 최대 날짜 제외 - 이 옵션을 사용하면 특정 범위 또는 날짜 집합에서 최대 날짜를 생략할 수 있습니다.

도움말 콘텐츠 탭 help-content-tab

도움말 콘텐츠 탭

  • 간단한 설명 - 간단한 설명은 특정 양식 필드의 용도에 대한 추가 정보 또는 설명을 제공하는 간단한 텍스트 설명입니다. 사용자가 필드에 입력해야 하는 데이터 유형을 이해하는 데 도움이 되며 입력된 정보가 유효하고 원하는 기준을 충족하는지 확인하는 데 도움이 되는 지침 또는 예시를 제공할 수 있습니다. 기본적으로 간단한 설명은 숨겨진 상태로 유지됩니다. 간단한 설명 항상 표시 옵션을 활성화하여 구성 요소 아래에 표시할 수 있습니다.

  • 간단한 설명 항상 표시 - 이 옵션을 활성화하여 구성 요소 아래에 간단한 설명을 표시할 수 있습니다.

  • 도움말 텍스트 - 도움말 텍스트는 양식 필드를 올바르게 작성하는 데 도움이 되도록 사용자에게 제공되는 추가 정보 또는 지침을 나타냅니다. 구성 요소 옆에 있는 도움말 아이콘(i)을 클릭하면 표시됩니다. 도움말 텍스트는 양식 필드의 레이블이나 플레이스홀더 텍스트보다 더 자세한 정보를 제공하며 사용자가 필드의 요구 사항이나 제한 사항을 이해하는 데 도움이 되도록 설계되었습니다. 또한 양식을 보다 쉽고 정확하게 작성할 수 있도록 제안이나 예시를 제공할 수도 있습니다.

접근성 탭 accessibility-tab

접근성 탭

  • 화면 판독기용 텍스트 - 화면 판독기용 텍스트는 시각 장애인이 사용하는 화면 판독기와 같은 보조 기술로 읽을 수 있도록 특별히 고안된 추가 텍스트를 나타냅니다. 이 텍스트는 양식 필드의 용도에 대한 오디오 설명을 제공하며, 여기에는 필드의 제목, 설명, 이름 및 관련 메시지(사용자 정의 텍스트)에 대한 정보가 포함될 수 있습니다. 화면 판독기 텍스트는 시각 장애가 있는 사용자를 포함한 모든 사용자가 양식에 액세스할 수 있도록 돕고 양식 필드 및 해당 요구 사항을 완전히 이해할 수 있도록 합니다.

    • 사용자 정의 텍스트: ARIA 접근성 레이블에 사용자 정의 텍스트를 사용하려면 이 옵션을 선택합니다. 이 옵션을 선택하면 사용자 정의 텍스트 대화 상자가 표시됩니다. 사용자 정의 텍스트 대화 상자에서 관련 정보를 추가할 수 있습니다.
    • 설명: ARIA 접근성 레이블에 설명을 사용하려면 이 옵션을 선택합니다.
    • 제목: ARIA 접근성 레이블에 제목을 사용하려면 이 옵션을 선택합니다.
    • 이름: ARIA 접근성 레이블에 이름을 사용하려면 이 옵션을 선택합니다.
    • 없음: ARIA 접근성 레이블에 아무 것도 추가하지 않으려면 이 옵션을 선택합니다.

형식 탭 format-tab

형식 탭

  • 표시 형식 - 사용자에게 표시되는 날짜 형식을 나타냅니다. 유형 옵션을 사용하면 날짜 형식을 선택할 수 있습니다. 유형 드롭다운 메뉴의 사용자 정의 옵션을 사용하여 날짜 형식을 사용자 정의할 수도 있습니다.

  • 편집 형식 - 사용자가 날짜를 편집할 수 있는 날짜 형식을 나타냅니다. 유형 옵션을 사용하면 날짜 형식을 선택할 수 있습니다. 유형 드롭다운 메뉴의 사용자 정의 옵션을 사용하여 날짜 형식을 사용자 정의할 수도 있습니다.

  • 포맷 오류 메시지 - 입력한 날짜의 포맷이 올바르지 않을 때 화면에 표시되는 메시지를 입력할 수 있는 옵션입니다.

  • 언어 - 이 기능은 특정 필드의 형식을 지정하는 데 사용됩니다. 사용자가 유형 드롭다운 메뉴에서 언어 옵션을 선택하면 패널에 IETF BCP 47 언어 태그 옵션이 나타납니다. 적응형 양식을 특정 언어로 번역할 때 필드 서식에 사용할 언어를 선택할 수 있습니다.

언어 세트는 기본적으로 표시되지 않지만 사용자는 템플릿 정책을 업데이트하여 사용자 정의 IETF BCP 47 언어 태그 ​를 입력할 수 있습니다.

  1. 템플릿 편집기에서 적응형 양식과 연결된 해당 템플릿을 엽니다.

  2. 드롭다운 메뉴에서 기존 정책을 datepicker-default-policy로 선택합니다.

    날짜 선택기 템플릿 정책

  3. 완료 ​를 클릭합니다.

    note note
    NOTE
    적응형 양식을 특정 로케일로 번역하는 방법에 대한 자세한 내용은 여기를 클릭하십시오.

디자인 대화 상자 design-dialog

디자인 대화 상자는 날짜 선택기 구성 요소의 CSS 스타일을 정의하고 관리하는 데 사용됩니다.

스타일 탭 styles-tab

탭은 구성 요소의 CSS 스타일을 정의하고 관리하는 데 사용됩니다. 적응형 양식 날짜 선택기 핵심 구성 요소는 AEM 스타일 시스템을 지원합니다.

스타일 탭

  • 기본 CSS 클래스: 적응형 양식 날짜 선택기 핵심 구성 요소에 기본 CSS 클래스를 제공할 수 있습니다.

  • 허용된 스타일: 이름과 스타일을 나타내는 CSS 클래스를 제공하여 스타일을 정의할 수 있습니다. 예를 들어 “bold text”라는 스타일을 만들고 “font-weight: bold”라는 CSS 클래스를 제공할 수 있습니다. 적응형 양식 편집기에서 이러한 스타일을 적응형 양식에 사용하거나 적용할 수 있습니다. 스타일을 적용하려면 적응형 양식 편집기에서 스타일을 적용할 구성 요소를 선택하고 속성 대화 상자로 이동한 다음 스타일 드롭다운 목록에서 원하는 스타일을 선택합니다. 스타일을 업데이트하거나 수정해야 하는 경우 디자인 대화 상자로 돌아가서 스타일 탭에서 스타일을 업데이트하고 변경 내용을 저장하면 됩니다.

사용자 정의 속성

사용자 정의 속성 대화 상자

사용자 정의 속성을 사용하면 양식 템플릿을 사용하여 사용자 정의 속성(키-값 쌍)을 적응형 양식 핵심 구성 요소에 연결할 수 있습니다. 사용자 정의 속성은 구성 요소의 Headless 렌디션에서 속성 섹션에 반영됩니다. 사용자 정의 속성 값에 따라 조정되는 동적 양식 동작을 만들 수 있습니다. 예를 들어 개발자는 모바일, 데스크탑 또는 웹 플랫폼을 위한 Headless 양식 구성 요소의 다양한 표현을 디자인하여 다양한 디바이스에서 사용자 경험을 크게 향상시킬 수 있습니다.

  • 그룹 이름: 사용자 정의 속성 그룹을 식별하기 위해 이름을 제공할 수 있습니다. 여러 사용자 정의 속성 그룹을 추가, 삭제 또는 재배열할 수 있습니다. 사용자 정의 속성 그룹을 추가하면 다음 옵션이 표시됩니다.

    • 키-값 쌍: 각 사용자 정의 속성 그룹의 추가 버튼을 클릭하여 여러 사용자 정의 속성 이름과 사용자 정의 속성 값을 추가할 수 있습니다.

    • 삭제: 사용자 정의 속성 이름과 사용자 정의 속성 값을 탭하거나 클릭하여 삭제할 수 있습니다.

    • 재배열: 사용자 정의 속성 이름과 사용자 정의 속성 값을 탭하거나 클릭하고 드래그하면 순서를 재배열할 수 있습니다.

형식 탭 formats-tab

형식 탭에서는 기본 및 사용자 정의 날짜 형식을 지정할 수 있습니다.

형식 탭

추가 참조 see-also

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