본문으로 건너뛰기

DatePicker

DatePicker(데이트피커) 위젯은 탭하면 스크롤 휠 형태의 피커가 열려 연·월·일을 골라 날짜를 입력하는 컴팩트한 입력 컨트롤입니다.
생년월일·예약일 등 날짜 하나를 좁은 공간에서 선택받을 때 사용합니다.

정의 / 역할​

DatePicker 위젯은 선택된 날짜(또는 안내 문구)와 아이콘을 담은 입력 영역을 그려줍니다. 영역을 누르면 피커가 열리고, 날짜를 확정하면 onDateSelected에 연결한 동작이 실행됩니다. 표시 형식·연도 범위·연/월/일 노출 여부·아이콘·크기 등을 설정할 수 있습니다.

  • 카테고리: Contents
  • 기본 안내 문구: 날짜를 선택하세요
  • 기본 크기: 176 x 36

기능​

기능설명
날짜 선택입력 영역을 누르면 스크롤 휠 피커가 열려 연·월·일을 고르고 확정합니다. 확정 시 onDateSelected에 연결한 동작이 실행됩니다.
표시 형식dateFormat으로 선택된 날짜의 표시 형식을 지정합니다. 미지정 시 yyyy.MM.dd 형식으로 표시됩니다.
안내 문구선택 전 표시할 안내 문구(hintText)와 글자 스타일을 설정합니다.
연도 범위minYear~maxYear로 선택 가능한 연도 범위를 제한합니다.
피커 항목 표시연/월/일 각 항목의 노출 여부를 개별로 켜고 끕니다.
아이콘·모양입력 영역 아이콘(크기·색)과 크기·여백·배경 장식을 조정합니다.

사용 방법​

  1. 왼쪽 위젯 팔레트에서 Contents 카테고리를 엽니다.
  2. DatePicker 항목을 캔버스로 끌어다 놓습니다.
  3. 오른쪽 속성 패널에서 hintText·dateFormat·연도 범위 등을 원하는 값으로 수정합니다.
  4. onDateSelected에 날짜를 확정했을 때 실행할 동작(로직·스크립트)을 연결합니다.
  5. 필요하면 아이콘·크기·배경 장식(decoration) 등을 조정합니다.

속성 (Property)​

노트

힌트·날짜 글자의 세부 스타일은 hintTextStyle·dateTextStyle에서 지정합니다. 아래는 DatePicker 고유 속성입니다.

속성설명기본값값 / 타입
Size입력 영역 크기 - 너비(width)·높이(height)를 함께 지정하는 묶음 속성너비 176·높이 36크기(너비·높이, 숫자 px)
padding안쪽 여백미지정여백 값
decoration배경 장식 (색·테두리·모서리)미지정박스 장식
hintText날짜 선택 전 표시할 안내 문구날짜를 선택하세요문자열
hintTextStyle안내 문구 글자 스타일미지정텍스트 스타일
dateTextStyle선택된 날짜 글자 스타일미지정텍스트 스타일
dateFormat선택된 날짜 표시 형식 (미지정 시 yyyy.MM.dd)미지정문자열
icon입력 영역에 표시할 아이콘미지정아이콘 설정
iconSize아이콘 크기16숫자(px)
iconColor아이콘 색#9E9E9E (회색)색상
minYear선택 가능한 최소 연도1900숫자
maxYear선택 가능한 최대 연도2099숫자
pickerYearVisible피커에 연도 노출 여부true참/거짓
pickerMonthVisible피커에 월 노출 여부true참/거짓
pickerDayVisible피커에 일 노출 여부true참/거짓
selectedDate초기 선택 날짜미지정문자열

주의 / 팁​

경고

maxYear는 minYear보다 크거나 같아야 합니다. maxYear가 minYear보다 작으면 속성 오류로 표시됩니다.

팁

pickerYearVisible·pickerMonthVisible·pickerDayVisible를 개별로 꺼서 연·월만 고르는 피커처럼 노출 항목을 구성할 수 있습니다.

더 알아보기​

팁

이 위젯을 스크립트로 제어하는 Widget Control(Property·Method·Event) 전체는 DatePicker (데이트피커) Widget Control 문서에서 확인하세요.