날짜/시간 선택도구
Android 또는 iOS 운영 체제를 실행하는 모바일 디바이스에서만 운영 체제(OS)에 포함된 기본 날짜 및 시간 선택도구가 날짜/시간 선택도구 보기에 표시됩니다. 이 동작으로 사용자는 다른 날짜 및 시간 선택도구를 볼 수 있습니다. 예를 들어, Android OS에서 사용자는 Google Chrome으로 태스크를 수행할 수 있으므로 기본 Android 날짜 및 시간 선택도구가 표시됩니다. 그런 다음 사용자가 Apple iPhone으로 전환하면 사용자는 대신 기본 iOS 날짜 및 시간 선택도구를 보게 됩니다.
날짜는 UTC 시간으로 저장되지만 표시되는 날짜와 시간은 사용자 시스템의 시간대에 맞게 조정됩니다.
제한사항 및 한계
사용자가 완벽한 날짜가 아니거나 형식이 유효하지 않은 컨텐츠에 입력하면, 사용자가 단추 클릭과 같은 경계 이벤트를 트리거할 때 바인드 데이터 항목은 널이 됩니다. 플로우가 페이지로 돌아가는 경우 보기는 비어 있습니다. 동일한 데이터 항목에 바인드되는 기타 보기도 비어 있습니다.
기본 날짜 및 시간 선택도구를 사용하면 다음 특성과 같은 일부 구성 특성이 적용되지 않습니다.
- 주 요일 사용 안함
- 블랙아웃 날짜
- 블랙아웃 날짜 시작
- 블랙아웃 날짜 종료
- 주 시작
- 달력 유형 ( 히브리어 또는 이슬람 이 선택된 경우)
- 날짜 선택도구 유형 ( 인라인 이 선택된 경우)
데이터 바인딩
일반 특성 탭에서 보기의 데이터 바인딩을 설정하거나 수정하십시오. 데이터 바인딩은 표시할 초기 날짜 및 시간을 포함하며 값에 대한
업데이트를 저장합니다. 데이터 유형은 Date입니다.
구성 특성
구성에서 보기의 모양 및 동작 특성을 설정하거나 수정하십시오.
- 화면 크기
- 특성 이름 옆에 화면 크기 아이콘
이 있는 구성 특성은 각 화면 크기에 대해 다른 값을 가질 수 있습니다. 값을 설정하지 않을 경우 화면 크기는 다음으로 큰 화면 크기 값을 기본값으로 상속합니다.
- 테마 정의
- 테마 정의는 보기를 위해 색상 및 스타일을 지정하고 보기의 모양을 결정합니다. 테마 편집기에서 보기의 룩앤필을 미리볼 수 있습니다. 테마를 참조하십시오.
| 모양 구성 특성 | 설명 | 데이터 유형 |
|---|---|---|
| 날짜 선택도구 유형 |
날짜 시간 선택도구에 대한 달력 표시 유형:
기본값은 텍스트 입력입니다. |
DatePickerType |
| 너비 | 날짜 선택도구 유형 특성에 대해 텍스트 입력 유형을 선택할 때 날짜 시간 선택도구의 너비입니다. 너비는 px(픽셀), %(백분율) 또는 em 단위로 지정할 수 있습니다. 예를 들어, 200px입니다. 숫자 값으로 지정된 단위 유형이 없으면 px가 사용됩니다. 기본적으로 너비는 지정되지 않습니다. | String |
| 크기 |
보기의 텍스트 크기, 레이블 텍스트의 크기, 텍스트 주위의 채우기 양입니다. 예를 들어, 스마트폰에서 텍스트 및 레이블을 더 쉽게 읽을 수 있도록 하기 위해 이 구성 옵션을 Large 로 설정하여 작은 화면 크기를 보완할 수 있습니다. | TextSizeStyle |
| 레이블 배치 |
날짜 시간 선택도구의 레이블 배치 위치입니다. | LabelPlacement |
| 레이블 너비 |
레이블의 너비입니다. 너비(px, 픽셀) 또는 em 단위를 지정할 수 있습니다. 예를 들면, 50px, 20% 또는 0.4em입니다. 단위 유형이 지정되지 않으면 px를 사용합니다. | String |
| 형식 | 텍스트 필드에 입력되는 텍스트를 표시하고 구문 분석하는 데 사용되는 형식입니다. 이는 구분 기호가 있거나 없는 자연어에 가까운 형식, 일 및 월만, 일만 등 (MM/dd/yyyy, dd/MM/yyyy, yyyy-MM-dd, yyyy MM dd, yyyyMMdd, DD MM, DD) 을 포함하여 다양한 날짜 입력을 허용합니다. 예:
이 구성 옵션은 Java SimpleDate형식과 동일한 형식을 지원하며 브라우저에 기본 날짜 시간 선택도구가 없는 경우에만 적용됩니다. |
String |
| 주 시작 | 매주 시작되는 요일입니다. 기본값은 일요일입니다. | DatePickerWeekStart |
| 주 요일 사용 안함 | 달력에서 차단되는 하나 이상의 요일입니다. 기본적으로 사용 불가능한 요일은 없습니다. | DatePickerDisabledWeekDays |
| 오늘 단추 표시 | 오늘 단추를 표시하거나 숨깁니다. 이때 이 단추는 오늘 날짜로 설정됩니다. 기본적으로 이 단추는 표시되지 않습니다. | Boolean |
| 선택 취소 단추 표시 | 지우기 단추를 표시하거나 숨깁니다. 이때 이 단추는 날짜 값을 지웁니다. 기본적으로 이 단추는 표시되지 않습니다. | Boolean |
| 방향 | 클릭했을 때 달력의 방향입니다. | DatePickerOrientation |
| 색상 스타일 | 날짜 시간 선택도구의 색상 스타일입니다. 색상은 지정된 테마에서 변수에 해당됩니다. 기본값은 기본값(진한 파란색)입니다. | DatePickerColorStyle |
| 주 번호 표시 |
그레고리력의 경우, 일 년 중에 해당 주의 번호를 표시합니다. 예를 들어, 그레고리력 연도의 마지막 주는 주 번호입니다.52. 기본적으로 주 번호가 표시되지 않습니다. | Boolean |
| 오늘 강조표시 | 오늘의 날짜가 달력에서 강조표시되는지 여부를 지정합니다. 기본적으로 오늘의 날짜는 강조표시되지 않습니다. | Boolean |
| 헤더 숨기기 | 사용자 정의 날짜 및 시간 선택도구의 맨 위에서 헤더를 숨깁니다. 기본적으로 헤더는 숨겨지지 않습니다. | Boolean |
| 달력 아이콘 표시 | 텍스트 입력 상자에 달력 아이콘을 표시합니다. | Boolean |
| 연도 선택기 스타일 | 연도 선택기의 스타일입니다 ( 기본값 또는 Modern). | tableHFStyle |
| 동작 구성 특성 | 설명 | 데이터 유형 |
|---|---|---|
| 사용자 정의 선택도구만 | 기본 날짜 및 시간
선택도구가 아닌 모바일 디바이스에서 항상 사용자 정의 날짜 및 시간 선택도구를 표시합니다. 모바일 디바이스에서는 항상 기본 날짜 및 시간 선택도구를 표시하기 위한 초기 시도가 수행됩니다. 그러나 지원되지 않는 다음 구성 특성 중 하나가 지정될 때마다 사용자 정의 날짜 및 시간 선택도구가 표시됩니다.
기본적으로 사용자 정의 날짜 및 시간 선택도구와 기본 날짜 및 시간 선택도구가 모두 적절하게 사용됩니다. |
Boolean |
| 시간 선택도구 포함 | 날짜/시간 선택도구 보기를 사용하여 시간 선택도구를 표시합니다. 기본적으로 시간 선택도구는 표시되지 않습니다. | Boolean |
| 달력 유형 | 달력 유형:
기본값은 그레고리력입니다. |
CalendarType |
| 탭 색인 | 탭 지정 순서 색인입니다. 탭 색인은 1부터 시작하며, 최소로 설정할 수 있습니다. 예를 들어, 1, 5, 10을 사용할 수 있습니다. 탭 색인 특성은 탭 키를 눌러 UI 영역 사이에서 이동할 때 탭 지정 순서를 제어합니다. | String |
| 플레이스홀더 텍스트 | 입력된 날짜가 없을 때 사용할 플레이스홀더 텍스트입니다. 일반적으로 텍스트는 사용자에게 필요한 간략한 설명 또는 예제입니다. 바인딩된 데이터 항목에 값이 없으면 사용자는 필드에 입력할 때까지 힌트를 보게 됩니다. 기본적으로 플레이스홀더 텍스트는 지정되지 않습니다. | String |
| 사용 가능한 시작 날짜 | 사용 가능한 시작 날짜 및 시간을 지정합니다. 지정된 사용 가능한 시작 날짜 이전의 모든 날짜는 차단됩니다. 사용 가능한 시작 날짜의 형식은 모양 특성의 형식 특성에 의해 지정됩니다. 기본적으로 사용 가능한 시작 날짜는 지정되지 않습니다. | Date |
| 사용 가능한 종료 날짜 | 사용 가능한 종료 날짜 및 시간입니다. 지정된 사용 가능한 종료 날짜 이후의 모든 날짜는 차단됩니다. 사용 가능한 종료 날짜의 형식은 모양 특성의 형식 특성에 의해 지정됩니다. 기본적으로 사용 가능한 종료 날짜는 지정되지 않습니다. | Date |
| 블랙아웃 날짜 | 블랙아웃할 단일 날짜 또는 여러 불연속 날짜의 목록입니다. 블랙아웃 날짜 목록이 제공되면, 보기는 기본 날짜 및 시간 선택도구 대신 사용자 정의 날짜 및 시간 선택도구를 사용합니다. 기본적으로 블랙아웃 날짜는 지정되지 않습니다. | Date (List) |
| 블랙아웃 날짜 시작 | 블랙아웃하려는 연속 날짜 범위의 시작 날짜입니다. 기본적으로 블랙아웃 시작 날짜는 지정되지 않습니다. | Date |
| 블랙아웃 날짜 종료 | 블랙아웃하려는 연속 날짜 범위의 종료 날짜입니다. 기본적으로 블랙아웃 종료 날짜는 지정되지 않습니다. | Date |
| 보기 시작 | 달력을 시작해야 하는 단위 레벨:
기본값은 Month입니다. |
DatePickerStartView |
| 최소 보기 모드 | 달력에서 사용할 최소 날짜 단위 레벨:
기본값은 Days입니다. |
DatePickerMinViewMode |
| 자동 닫기 없음 | 날짜를 선택할 때 달력이 닫히지 않도록 지정합니다. 대신 날짜 시간 선택도구가 초점을 잃을 때 달력이 닫힙니다. 기본적으로 날짜를 선택할 때 달력은 자동으로 닫힙니다. | Boolean |
| 세기 범위 | 현재 연도 이전의 간격으로 두 자리 연도를 입력할 때 100년 범위의 시작을 표시합니다. 기본적으로 값은 50년으로 설정되며, 이는 날짜 선택기가 50년 전에 시작하는 100년 범위에 맵핑함을 의미합니다. 예를 들어 2023년의 세기 범위가 50인 경우 세기 범위의 시작은 2023 - 50 = 1973이므로 2072는 세기 범위의 끝이 됩니다. | Integer |
| 스마트 구문 분석 사용 안함 | 사용자가 입력하는 텍스트의 스마트 구문 분석을 사용 안함으로 설정합니다. 스마트 구문 분석은 기본적으로 사용 가능합니다. 스마트 구문 분석이 사용 안함으로 설정되면 지정된 날짜/시간 형식을 사용하는 값만 허용됩니다. 지정된 형식 이외의 모든 형식은 유효하지 않은 것으로 선언되며, 사용자는 대신 허용된 형식을 사용하도록 프롬프트됩니다. | Boolean |
예
클릭 가능한 달력 단추가 있도록 하려면 입력 그룹 보기 내부에 날짜/시간 선택도구 보기를 배치할 수 있습니다. 입력 그룹 보기의 특성에서 단추 유형 특성을 아이콘 으로 설정하고 단추 정보 특성을 달력으로 설정하십시오. 입력 그룹 보기에 대한 On button click 이벤트에서 다음 문자열을 입력하십시오.
${Control_ID}._instance.pickerControl.show();이벤트
이벤트 특성에서 보기에 대한 이벤트 핸들러를 설정하거나 수정하십시오. 사용자가 보기로 상호작용할 때 또는 프로그래밍 방식으로 트리거되도록 이벤트를 설정할 수 있습니다. 이벤트를 정의하고 코딩하는 방법에 대한 정보는 사용자 정의 이벤트를 참조하십시오. 날짜/시간 선택도구에는 다음 유형의 이벤트 핸들러가 있습니다.
- On load: 페이지가 로드될 때 활성화됩니다. 예를 들어,
var workerStart = ${StartDate}.getDate(); me.setStart(workerStart); - On change: 변경이 발견되면 활성화됩니다. 예를 들어,
return confirm("Are you sure you want to change date?") - On day cell render: 일 셀 렌더링이 있는 경우 활성화됩니다. 날짜가
날짜 시간 선택도구에 표시되기 전에 트리거됩니다. 예를 들어,
me.setDate("01/01/2015")
특정 이벤트에 따라 JavaScript 로직을 사용하여 보기의 효과를 수정할 수 있습니다. 보기에서 이벤트 사용에 대한 자세한 정보는 사용자 정의 이벤트주제에 있습니다.
메소드
날짜/시간 선택도구의 사용 가능한 메소드에 대한 자세한 정보는 날짜/시간 선택도구 JavaScript API 를 참조하십시오.
추가 자원
Coach 또는 페이지를 작성하는 방법에 대한 정보는 Coach 빌드를 참조하십시오.
표준 특성 (일반, 구성, 위치 지정, 가시성및 HTML 속성) 에 대한 정보는 특성 보기를 참조하십시오.