Component

DateRange

Basic

input element를 이용하여 시작날짜과 종료날짜를 선택할 수 있는 DateRange 컴포넌트입니다. class="DateRange"
시작날짜 class="Startdate Dateinput", 종료날짜 class="Startdate Dateinput" 를 사용합니다.

From

~ To

<div class="Daterange" data-default-date="false" >
	From
	<div class="Startdate Dateinput">
		<input id="daterange01">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange02">
	</div>
</div>

NoLimit 2.3.1.17+

Startdate NoLimit를 설정하면, 시작날짜는 min date 설정이 적용되지 않습니다.
하지만, 종료날짜에는 여전히 max date가 설정된 상태가 됩니다.

From

~ To

<div class="Daterange" data-default-date="false" >
	From
	<div class="Startdate NoLimit Dateinput">
		<input id="daterange03">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange04">
	</div>
</div>

Enddate NoLimit를 설정하면, 종료날짜는 max date 설정이 적용되지 않습니다.
하지만, 시작날짜에는 여전히 min date가 설정된 상태가 됩니다.

From

~ To

<div class="Daterange" data-default-date="false" >
	From
	<div class="Startdate Dateinput">
		<input id="daterange05">
	</div>
	~ To
	<div class="Enddate NoLimit Dateinput">
		<input id="daterange06">
	</div>
</div>

Startdate/Enddate input에 모두 NoLimit를 설정하면,
시작날짜/종료날짜 모두 min/max date 설정이 적용되지 않습니다.

From

~ To

<div class="Daterange" data-default-date="false" >
	From
	<div class="Startdate NoLimit Dateinput">
		<input id="daterange07">
	</div>
	~ To
	<div class="Enddate NoLimit Dateinput">
		<input id="daterange08">
	</div>
</div>

Attributes

data-default-date

"true"
- input가 null일때 focusout시점에 default값의 사용 여부를 설정 할 수 있습니다.

data-enabled

"true"
- DateRange 컴포넌트를 활성화 합니다.

From

~ To

<div class="Daterange" data-default-date="false"  data-enabled="false">
	From
	<div class="Startdate Dateinput">
		<input id="daterange15">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange16">
	</div>
</div>

data-format

'dateformat'
- 설정한 포맷 형태로 텍스트가 입력됩니다.

From

~ To

<div class="Daterange" data-default-date="false"  data-placeholder="true" data-format="MM/dd/yyyy">
	From
	<div class="Startdate Dateinput">
		<input id="daterange17">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange18">
	</div>
</div>

data-pickertype

"daily"
- 일 달력 (default)
"weekly"
- 주 달력

From

~ To

<div class="Daterange" data-default-date="false"   data-pickertype="weekly">
	From
	<div class="Startdate Dateinput">
		<input id="daterange09">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange10">
	</div>
</div>

"monthly"
- 월 달력

From

~ To

<div class="Daterange" data-default-date="false"   data-pickertype="monthly">
	From
	<div class="Startdate Dateinput">
		<input id="daterange11">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange12">
	</div>
</div>

data-placeholder

"true"

data-selectmonth

"true"
- 달 선택을 위해 셀렉트 박스를 사용합니다.

From

~ To

<div class="Daterange" data-default-date="false"  data-selectyear="true" data-selectmonth="true">
	From
	<div class="Startdate Dateinput">
		<input id="daterange13">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange14">
	</div>
</div>

data-selectyear

"true"
- 년도 선택을 위해 셀렉트 박스를 사용합니다.

data-startweekday 2.10.8+

한주의 시작요일 설정하는 속성입니다. data-pickertype이 "daily", "weekly" 일때 사용가능합니다.

"sun"
- 한주의 시작요일이 일요일 (default)
"mon"
- 한주의 시작요일이 월요일

From

~ To

<div class="Daterange" data-default-date="false"  data-pickertype="weekly" data-startweekday="mon">
	From
	<div class="Startdate Dateinput">
		<input id="daterange25">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange26">
	</div>
</div>

Options 3.0.0+

$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.

Functions

.clear()

DateRange 컴포넌트의 텍스트를 삭제하는 함수입니다. 함수 사용 후 change 이벤트가 발생합니다.

From

~ To

<div class="Daterange" data-default-date="false"  id="daterange3">
	From
	<div class="Startdate Dateinput">
		<input id="daterange23">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange24">
	</div>
</div>
<button id="btn_clear" class="Margin-left-10 Button">clear()</button>

$('#btn_clear').on('click', function(){
	$('#daterange3').clear();
});

.getOptions() 3.0.0+

Daterange에 설정된 옵션값을 모두 가져올 수 있습니다.

Return {object}
- object
  - Daterange에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.

//Daterange에 설정된 모든옵션값을 가져옵니다.
$('#Daterange').getOptions();

.setEnabled(boolean)

DateRange 컴포넌트를 활성화/비활성화할 수 있는 함수입니다.

parameter
- "true" Required.
  - daterange 컴포넌트를 활성화합니다.

From

~ To

<div class="Daterange" data-default-date="false"  id="daterange1">
	From
	<div class="Startdate Dateinput">
		<input id="daterange19">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange20">
	</div>
</div>
<button id="btn_setEnabledFalse" class="Margin-left-10 Button">setEnabled(false)</button>
<button id="btn_setEnabledTrue" class="Button">setEnabled(true)</button>

$('#btn_setEnabledFalse').on('click', function(){
	$('#daterange1').setEnabled(false);
});

$('#btn_setEnabledTrue').on('click', function(){
	$('#daterange1').setEnabled(true);
});

.setOptions(options) 3.0.0+

Daterange에 동적으로 옵션을 설정합니다.

Parameters
- options {object}
  - Daterange에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.

$('#Daterange').setOptions({
	selectyear: true,
	selectmonth: true
});

.update(JSON option)

DateRange 컴포넌트에서 보여지는 DatePicker 컴포넌트의 옵션을 동적으로 설정합니다.
셀렉터로 해당 DateRange 요소의 하위 DateInput을 지정 해줍니다. $("#daterangeId .Dateinput")

parameter
- option {JSON} Required.
  - 자세한 DatePicker 옵션 사용법은 showDatePicker 옵션을 참고하세요.

From

~ To

<div id="daterange2" class="Daterange" data-default-date="false" >
	From
	<div class="Startdate Dateinput">
		<input id="daterange21">
	</div>
	~ To
	<div class="Enddate Dateinput">
		<input id="daterange22">
	</div>
</div>
<button id="btn_update1" class="Margin-left-10 Button">월별 선택</button>
<button id="btn_update2" class="Button">일별 선택+연도 셀렉트</button>

$("#btn_update1").on("click", function (){
	$('#daterange2 .Dateinput').update({
		pickertype: 'monthly',
		format: 'yyyy-MM',
		selectyear: false,
		selectmonth: false
	}); // 월별 선택 달력
});
$("#btn_update2").on("click", function (){
	$('#daterange2 .Dateinput').update({
		pickertype: 'daily',
		format: 'yyyy-MM-dd',
		selectyear: true,
		selectmonth: true
	}); // 일별 선택 + 연도,월 셀렉트 달력
});

다국어 설정 2.10.4+

setup 자바스크립트에서 DateRange 다국어 설정을 공통으로 설정합니다.

locale 속성은 $a.setup 다국어설정을 통해서 Alopex UI 공통으로도 적용 가능합니다.

$a.setup('daterange', {
	locale : 'ko'
});

locale {string}
- 'ko'(default) | 'en' | 'zh' | 'ja'

본문 상단으로 이동

Component

DateRange

NoLimit 2.3.1.17+

data-default-date

data-enabled

data-format

data-pickertype

data-placeholder

data-selectmonth

data-selectyear

data-startweekday 2.10.8+

defaultdate

enabled

format

pickertype

placeholder

selectmonth

selectyear

startweekday

.clear()

.getOptions() 3.0.0+

.setEnabled(boolean)

.setOptions(options) 3.0.0+

.update(JSON option)