DateRangePicker, PopupDateRangePicker 소개

DateRangePicker 컴포넌트는 1개 또는 2개(시작일자와 종료일자)의 날짜와 시간을 입력받거나 선택하기 위한 컴포넌트입니다. PopupDateRangePicker 컴포넌트는 DateRangePicker 컴포넌트와 유사하지만 팝업 형태로 동작합니다.

사용 예

여행 일정을 예약하는 서비스에서는 체크인, 체크 아웃 일정을 설정할 때 2개의 달력을 한눈에 볼 수 있게 표시해 달력을 따로 조작하지 않고도 2개의 일정을 선택할 수 있게 합니다.

DateRangePicker / PopupDateRangePicker 사용하기

DateRangePicker와 PopupDateRangePicker 컴포넌트를 사용하기 위해서는 TypeDefinition에서 컴포넌트를 추가해주어야 합니다.

특정 일자만 선택하도록 허용하기

사용자가 선택할 수 있는 날짜 범위를 특정할 수 있습니다.

예제

오른쪽 표에서 선택한 mindate, maxdate 속성값에 따라 해당 범위 이외의 날짜는 선택할 수 없는 상태가 됩니다.

sample_daterangepicker_01.xfdl

예제에서 사용한 핵심 기능

mindate

지정한 날짜를 제외한 이전 일자는 선택할 수 없는 상태가 됩니다.

maxdate

지정한 날짜를 제외한 이후 일자는 선택할 수 없는 상태가 됩니다.

예제 구현 방법

this.Grid00_oncellposchanged = function(obj:nexacro.Grid,e:nexacro.GridSelectEventInfo)
{
    this.DateRangePicker00.mindate = this.Dataset00.getColumn(e.row, "mindate");
	this.DateRangePicker00.maxdate = this.Dataset00.getColumn(e.row, "maxdate");
};

DateField 컴포넌트에서 PopupDateRangePicker 컴포넌트 사용하기

DateField 컴포넌트에서 날짜와 시간을 선택하기 위해 DateRangePicker 컨트롤을 사용하긴 하지만 세부적인 속성을 설정하는 데는 제약이 있습니다. PopupDateRangePicker 컴포넌트를 사용하면 PopupDateRangePicker 컴포넌트의 속성을 모두 사용해 원하는 형태로 구성할 수 있습니다.

예제

두 번째 DateField 컴포넌트에서 DateRangePicker 컨트롤 대신 PopupDateRangePicker 컴포넌트를 실행합니다.

sample_daterangepicker_02.xfdl

예제에서 사용한 핵심 기능

type

PopupDateRangePicker 컴포넌트에서 하나의 날짜만 선택할지 여부를 설정합니다. 날짜를 선택하고 팝업창이 닫히는 동작에 영향을 미칩니다.

displaymonthcount

화면에 표시되는 월 달력 개수를 선택합니다. 1~3까지 숫자 중 하나를 선택할 수 있습니다.

defaultrangeposition

displaymonthcount 속성값을 3으로 설정한 경우 startdate 또는 현재일이 포함된 월 달력이 표시되는 위치를 선택합니다. 2로 설정한 경우 가운데에 표시됩니다.

예제 구현 방법

defaultrangeposition: 2

displaymonthcount: 3

type: "single"

useheadline: false

useclosebutton: false

DateRangePicker 컨트롤 대신 PopupDateRangePicker 컴포넌트를 실행하도록 설정합니다.

this.DateField01_ondropdown = function(obj:nexacro.DateField,e:nexacro.EventInfo)
{
	this.PopupDateRangePicker00.trackPopupByComponent( "start", obj, 0,33);
	e.preventDefault();
};

useclosebutton 속성값이 true인 경우에는 날짜를 선택하고 [CLOSE] 버튼을 클릭해야 팝업창이 닫힙니다.

this.PopupDateRangePicker00_ondayclick = function(obj:nexacro.PopupDateRangePicker,e:nexacro.DateRangePickerDayClickEventInfo)
{
	this.DateField01.value = e.date;
};