Component
DateRange
input element를 이용하여 시작날짜과 종료날짜를 선택할 수 있는 DateRange 컴포넌트입니다. class="DateRange"
시작날짜 class="Startdate Dateinput"
, 종료날짜 class="Startdate Dateinput"
를 사용합니다.
<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
Startdate NoLimit를 설정하면, 시작날짜는 min date 설정이 적용되지 않습니다.
하지만, 종료날짜에는 여전히 max date가 설정된 상태가 됩니다.
<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가 설정된 상태가 됩니다.
<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 설정이 적용되지 않습니다.
<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>
data-default-date
- "true"
- input가 null일때 focusout시점에 default값의 사용 여부를 설정 할 수 있습니다.
data-enabled
- "true"
- DateRange 컴포넌트를 활성화 합니다.
<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'
- 설정한 포맷 형태로 텍스트가 입력됩니다.
<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"
- 주 달력
<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"
- 월 달력
<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"
- 달 선택을 위해 셀렉트 박스를 사용합니다.
<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
한주의 시작요일 설정하는 속성입니다. data-pickertype이 "daily", "weekly" 일때 사용가능합니다.
"sun"
- 한주의 시작요일이 일요일 (default)
"mon"
- 한주의 시작요일이 월요일
<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>
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
defaultdate
enabled
- data-enabled 참고
format
- data-format 참고
pickertype
placeholder
selectmonth
selectyear
startweekday
.clear()
DateRange 컴포넌트의 텍스트를 삭제하는 함수입니다. 함수 사용 후 change 이벤트가 발생합니다.
<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()
Daterange에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Daterange에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Daterange에 설정된 모든옵션값을 가져옵니다.
$('#Daterange').getOptions();
.setEnabled(boolean)
DateRange 컴포넌트를 활성화/비활성화할 수 있는 함수입니다.
- parameter
- "true" Required.
- daterange 컴포넌트를 활성화합니다.
- "true" Required.
<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)
Daterange에 동적으로 옵션을 설정합니다.
- Parameters
- options {object}
- Daterange에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
- options {object}
$('#Daterange').setOptions({
selectyear: true,
selectmonth: true
});
.update(JSON option)
DateRange 컴포넌트에서 보여지는 DatePicker 컴포넌트의 옵션을 동적으로 설정합니다.
셀렉터로 해당 DateRange 요소의 하위 DateInput을 지정 해줍니다. $("#daterangeId .Dateinput")
- parameter
- option {JSON} Required.
- 자세한 DatePicker 옵션 사용법은 showDatePicker 옵션을 참고하세요.
- option {JSON} Required.
<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
}); // 일별 선택 + 연도,월 셀렉트 달력
});
setup 자바스크립트에서 DateRange 다국어 설정을 공통으로 설정합니다.
locale 속성은 $a.setup 다국어설정을 통해서 Alopex UI 공통으로도 적용 가능합니다.
$a.setup('daterange', {
locale : 'ko'
});
- locale {string}
- 'ko'(default) | 'en' | 'zh' | 'ja'