- Calendar > Basic
언젠가부터 웹에서 달력을 사용하는 것이 자연스러워졌습니다.
달력은 단순하게 날짜를 나열하는 것같지만 나라마다 사용하는 형식이 다르며
달력을 보여주는 방식(월요일부터 시작할지, 일요일부터 시작할지)도 다릅니다.
기본적으로 엑스플랫폼에서 사용하는 달력 컴포넌트에 대해 살펴보겠습니다.
달력 컴포넌트는 여러가지 컴포넌트가 복합적으로 구성된 컴포넌트입니다.
UX 스튜디오에서 달력 컴포넌트를 가져다 놓으면 아래와 같이 보여집니다.
MaskEdit와 Button 이 하나의 묶음으로 보여집니다.
버튼을 클릭하면 팝업으로 바로 아래에 날짜를 선택할 수 있는 DatePicker가 나타납니다.
DatePicker 안에도 년도를 이동하는 부분을 spin으로 구성할 수도 있고 전월과 다음월을 이동하는 버튼 등
다양한 컴포넌트가 포함되어집니다.
(1) 바인딩 처리
- 데이터셋과 바인딩을 연결해줄 수 있습니다.
- UX 스튜디오에서 데이터셋을 드래그앤드롭해주면 아래와 같이 설정할 수 있게 됩니다.
그리드와 연결되었을 경우에 선택된 데이터를 달력에도 표기할 수 있습니다.
이때 넘겨지는 데이터는 dateformat에 따라 화면에 표시됩니다.
기본값은 yyyy-MM-dd ddd 입니다.
각 항목에 대한 자세한 내용은 도움말을 참고하세요.
dateformat은 화면에 보여지는 날짜고 editformat은 별도로 설정할 수 있습니다.
각각의 달력은 locale 설정을 따라갑니다.
locale 속성은 달력 컴포넌트 자체적으로도 제공하고
form이나 application 단위에서 제공할 수도 있습니다.
form의 locale 속성은 ja_JP로 설정해도 개별 달력 컴포넌트를 ko_KR로 설정하면 달력 컴포넌트의 설정을 따라갑니다.
(2) 펼쳐 보이기
- 화면에 따라 DatePicker가 바로 보이게 해야 하는 경우
- type 설정에 따라 조정할 수 있습니다.
- type의 기본값은 normal 이며 monthonly 로 설정하면 DatePicker 를 바로 보이게 하며 spin 으로 설정하면
spin 버튼으로 날짜를 선택할 수 있게 합니다.
- spin 설정일 경우에는 버튼으로 조정할 수 있으며 직접 수정할 수 있습니다.
직접 수정시에는 달력에 입력할 수 있는 문자열로 한정이 되기때문에 잘못된 입력을 방지할 수 있습니다.
(3) Trailing Day
- 위의 달력에서는 31일 이후의 날짜 즉 이전달과 다음달의 날짜는 표기가 되지 않는데
경우에 따라 이런 표기가 필요한 경우가 있습니다.
- 이런 항목을 Trailing Day 라고 하며 엑스플랫폼에서는 속성(스타일)에서 usetrailingday 를 선택할 수 있습니다.
기본값은 true 이며 false를 선택하면 보이지 않게 합니다.
(4) 오늘 날짜
- Date() 객체를 사용하면 오늘 날짜를 구할 수 있습니다.
var objDate = new Date();
var sDate = objDate.toFormatString("%Y%m%d");
return sDate;
toFormatString 을 사용할때 날짜 형식과 locale을 지정할 수 있습니다.
- 날짜를 조정하는 경우에는 addDate(), addMonth() 등을 사용해서 활용할 수 있습니다.
(5) 공휴일 지정하기
- innerdataset을 선택해서 date, color, backgroundcolor을 설정하여 표시할 수 있습니다.
- 사전에 데이터셋을 만들어야 하면 매년 필요한 데이터를 넣어주어야 하기때문에
