DateField 소개
DateField 컴포넌트는 날짜와 시간을 입력받기 위한 컴포넌트입니다. Calendar 컴포넌트와 유사하지만 Material Design 요소를 반영했으며 날짜뿐 아니라 시간까지 입력받을 수 있습니다.
사용 예
Material Design의 Date pickers 컴포넌트는 모바일 기기처럼 화면 크기가 제한된 환경에서 라벨 정보를 효율적으로 노출하고 원하는 날짜를 선택할 수 있습니다.
Material Design의 Date pickers 컴포넌트에 대한 좀 더 자세한 내용은 아래 링크를 참고하세요.
DateField 사용하기
DateField 컴포넌트를 사용하기 위해서는 TypeDefinition에서 DateField 컴포넌트를 추가해주어야 합니다.
24.0.0.200 이후 버전에서는 프로젝트 생성 시 DateField 컴포넌트가 추가된 상태로 표시됩니다.
24.0.0.100 또는 넥사크로 N V21에서 만든 프로젝트를 사용하는 경우 아래와 같은 방법으로 DateField 컴포넌트를 추가해주어야 합니다.
1
Project Explorer에서 [TypeDefinition > Objects] 항목을 더블 클릭합니다.
2
Modules 항목에서 MobileComp.json 항목을 펼칩니다.
3
nexacro.DateField 항목 옆에 [+] 아이콘을 클릭해 DateField 컴포넌트를 Objects 목록에 추가합니다.
시간만 선택하기
DateField 컴포넌트는 inputtype 속성에 따라 날짜, 시간 또는 날짜와 시간 모두를 입력받을 수 있게 설정할 수 있습니다.
예제
팝업 달력 대신 시간을 선택할 수 있는 팝업창이 표시됩니다.
sample_edit_01_01
예제에서 사용한 핵심 기능
- inputtype
선택한 값에 따라 팝업창 형식이 달라집니다.
예제 구현 방법
1
화면에 DateField 컴포넌트를 배치합니다.
2
DateField 컴포넌트의 inputtype 속성값을 "time"으로 변경합니다.
3
DateField 컴포넌트의 format 속성값을 "h:mm:ss aa"으로 변경합니다.
4
QuickView(Ctrl + F6)를 실행하여 DateField 컴포넌트에 시간을 입력합니다.