전체 강좌 목록:
http://semicolon1.kr/appinventor.html
날짜 선택 버튼 컴포넌트는 사용자가 버튼을 누르면 날짜를 선택할 수 있도록 하는 컴포넌트 입니다.
0. 개요
버튼의 한 종류로써, 사용자가 눌렀을 때 날짜를 선택할 수 있는 창을 띄어주는 특수한 기능을 가진 버튼 입니다.
사용자가 날짜를 선택하면 그와 관련된 처리를 할 수 있는 기능을 제공합니다.
1. 형태
위와같이 외관은 일반 버튼 컴포넌트와 동일합니다.
앱인벤터2 공식 레퍼런스
http://ai2.appinventor.mit.edu/reference/components/userinterface.html#DatePicker
1. 속성
날짜 선택 버튼(DatePicker) 속성 | |||
속성명 | 설명 | 예시 | |
배경색(BackgroundColor) | 버튼의 배경색을 지정합니다. |  | |
활성화(Enabled) | 버튼의 활성화 여부를 지정합니다. 활성화가 거짓이면 버튼을 누를 수 없습니다. |  | |
글꼴굵게(FontBold) | 버튼의 텍스트에 볼드체(굵은체)를 적용합니다. |  | |
글꼴이텔릭(FontItalic) | 버튼의 텍스트에 이텔릭(기울임)을 적용합니다. |  | |
글꼴크기(fontSize) | 버튼의 텍스트 크기를 지정합니다. |  | |
글꼴서체(FontTypeface) | 버튼의 텍스트의 글꼴을 지정합니다. |  | |
높이(Feight) | 버튼의 높이(세로)를 지정합니다. | – | |
너비(Width) | 버튼의 너비(가로)를 지정합니다. | – | |
이미지(Image) | 버튼의 배경 이미지를 지정합니다. |  | |
모양(Shape) | 버튼의 모양을 지정합니다. |  | |
피드백(ShowFeedBack) | 버튼의 피드백을 표시할지 설정합니다. |  | |
텍스트(Text) | 버튼의 텍스트를 지정합니다. |  | |
텍스트정렬(TextAlignment) | 버튼의 텍스트의 내부 정렬 방식을 지정합니다. |  | |
텍스트색상(TextColor) | 버튼의 텍스트 색상을 지정합니다. |  | |
보이기여부(Visible) | 버튼의 보이기 여부를 지정합니다. 보이기가 거짓이면 마치 그 자리에 없는 것 처럼 보입니다. |  | |
2. 블록
날짜 선택 버튼(DatePicker) 이벤트 블록 | |
블록 | 설명 |
 언제 [날짜 선택 버튼] .날짜 선택 후에 | 사용자가 날짜 선택 버튼을 눌러서 뜬 날짜 선택 창에서 날짜를 선택한 후 확인 버튼을 눌렀을 때 실행됩니다. |
 언제 [날짜 선택 버튼] .포커스를 받았을 때 | 버튼이 포커스를 받았을 때 작동합니다. |
 언제 [날짜 선택 버튼] .포커스를 잃었을 때 | 버튼이 포커스를 잃었을 때 작동합니다. |
 언제 [날짜 선택 버튼] .터치다운 했을 때 | 손으로 버튼을 누르는 순간 실행됩니다. |
 언제 [날짜 선택 버튼] .터치업 했을 때 | 손이 버튼에서 떨어지는 순간 실행됩니다. |
날짜 선택 버튼(DatePicker) 함수 블록 | |
블록 | 설명 |
 [날짜 선택 버튼] .선택창 열기 | 날짜를 선택하는 창을 띄웁니다. |
 [날짜 선택 버튼] .표시할 날짜 설정하기 ㄴ년 [숫자] ㄴ월 [숫자] ㄴ일 [숫자] | 버튼이 눌렸을 때 기본적으로 표시할 날짜를 지정합니다. 지정하지 않을 경우 자동으로 오늘 날짜가 지정됩니다. 입력값은 숫자 입니다. |
 [날짜 선택 버튼] .인스턴트로 표시할 날짜 설정하기 ㄴ인스턴트 | 인스턴트를 이용하여 기본 표시 시간을 지정합니다. 인스턴트는 센서 탭의 시계 컴포넌트로 만들거나 가져올 수 있습니다. 그 외 날짜를 인스턴트로 제공하는 경우에도 사용 가능합니다. |
날짜 선택 버튼(DatePicker) 속성 지정 블록 | ||
블록 | 입력형식 | 설명 |
 | 색상 | 버튼의 배경색을 지정합니다. 만약 이미지가 있다면, 색상은 가려서 보이지 않습니다. |
 | 논리 | 버튼의 활성화 값을 지정합니다. 거짓이면 버튼이 눌리지 않습니다. |
 | 논리 | 글씨를 굵게 할 것 인지 설정합니다. |
 | 논리 | 글씨를 기울일 것 인지 설정합니다. |
 | 숫자 | 글꼴의 크기를 sp단위로 지정합니다. |
 | 숫자 | 버튼의 높이를 px 단위로 지정합니다. |
 | 숫자 | 버튼의 높이를 스크린 높이에 대한 비율로 지정합니다. 예를 들어 50이면 버튼의 높이를 스크린 높이의 절반으로 지정합니다. |
 | 텍스트 | 버튼의 배경 이미지를 지정합니다. 입력값은 앱인벤터에 올린 파일명, 이미지 URL, 그 외 이미지를 반환하는 블록 등이 올 수 있습니다. 만약 배경색과 이미지가 같이 설정된 상태면 이미지만 보입니다. |
 | 논리 | 버튼의 피드백 보이기를 지정합니다. |
 | 텍스트 | 버튼 내부의 텍스트를 지정합니다. |
 | 색상 | 버튼 내부의 텍스트의 색상을 지정합니다. |
 | 논리 | 버튼의 보이기 여부를 지정합니다. 만약 거짓이면 버튼은 아예 그 자리에 없던것 처럼 높이와 너비가 0이 됩니다. |
 | 숫자 | 버튼의 너비를 px 단위로 지정합니다. |
 | 숫자 | 버튼의 너비를 스크린 너비에 대한 비율로 지정합니다. 예를 들어 50이면 버튼의 너비를 스크린 너비의 절반으로 지정합니다. |
날짜 선택 버튼(DatePicker) 속성 블록 | |
블록 | 반환형식 |
 | 색상 |
 | 숫자 |
 | 논리 |
 | 논리 |
 | 논리 |
 | 숫자 |
 | 숫자 |
 | 텍스트 |
 | 인스턴트 |
 | 숫자 |
 | 텍스트 |
 | 논리 |
 | 텍스트 |
 | 색상 |
 | 논리 |
 | 숫자 |
 | 숫자 |
 | 컴포넌트 |
3. 기타 특성
선택할 수 있는 날짜의 범위는 다음과 같습니다:
1900년 01월 01일 ~ 2100년 12월 31일
또한 위 날짜의 범위를 벗어나는 날짜는 블록으로도 지정할 수 없으며, 그 날짜를 벗어나면 범위의 최솟값 혹은 최댓값이 지정되어 보여집니다.
4. 예제
날짜 선택 버튼의 기능을 간단히 테스트 해볼 수 있는 예제 입니다.
댓글