Component
DateInput
input element를 이용해서 달력 컴포넌트를 사용할 때 dateinput 컴포넌트를 사용합니다. class="Dateinput"
input을 click 하면 달력 컴포넌트가 활성화 됩니다.
<div class="Dateinput">
<input id="dateinput01">
</div>
내부에 위치한 Div 테그에 다음과 같이 mark-up을 추가 할 경우에는,
Calendar icon image를 click 할 때 달력 컴포넌트가 활성화 됩니다.
class="Calendar"
<div class="Dateinput">
<input id="dateinput02">
<div class="Calendar" id="dateinput03"></div>
</div>
data-block-key
- "true"
- dateinput 컴포넌트의 지정한 포맷의 길이를 넘어가지 못하도록 설정됩니다.
<div class="Dateinput" data-block-key="true">
<input id="dateinput17">
</div>
data-click-select
- "true"
- dateinput 컴포넌트를 클릭했을때 전체선택되도록 설정됩니다.
<div class="Dateinput" data-click-select="true">
<input id="dateinput18">
</div>
data-default-date
- 'false'
- input가 null일때 focusout시점에 default값의 사용 여부를 설정 할 수 있습니다.
<div class="Dateinput" data-default-date="false">
<input id="dateinput16">
</div>
data-disabled
- "true"
- dateinput 컴포넌트를 비활성화합니다.
<div class="Dateinput" data-disabled="true">
<input id="dateinput13">
</div>
data-format
- 'dateformat'
- 설정한 포맷 형태로 텍스트가 입력됩니다.
<div class="Dateinput" data-format="MM/dd/yyyy">
<input id="dateinput04">
</div>
// 셋업 설정 시
$a.setup('dateinput', {
format: MM/dd/yyyy
});
data-inputwidth
- "auto"
- data-format 의 길이에 맞게 input의 너비가 설정됩니다.
- {number}
- input의 너비를 지정할 때 사용합니다.
<div class="Dateinput" data-inputwidth="200">
<input id="dateinput15">
</div>
data-maxdate
- {dateformat}
- 설정한 포맷 형태로 선택할 수 있는 최대 날짜 값을 설정합니다.
<div class="Dateinput" data-maxdate="2019-12-30">
<input id="dateinputMaxdate">
</div>
data-mindate
- {dateformat}
- 설정한 포맷 형태로 선택할 수 있는 최소 날짜 값을 설정합니다.
<div class="Dateinput" data-mindate="2019-01-01">
<input id="dateinputMindate">
</div>
data-pickertype
- "daily"
- '일'단위로 선택할 수 있는 달력 입니다.
- "monthly"
- '월'단위로 선택할 수 있는 달력 입니다.
<div class="Dateinput" data-pickertype="daily">
daily: <input id="dateinput06">
</div>
<div class="Dateinput" data-pickertype="monthly">
monthly: <input id="dateinput07">
</div>
data-pickerposition
- "left", "right", "top", "bottom", "top | left", "top | right"
- DatePicker 의 position을 설정할 때 사용합니다.
<div class="Dateinput" id="dateinputDiv08">
bottom | left (default) : <input id="dateinput08">
</div>
<div class="Dateinput" data-pickerposition="right">
bottom | right : <input id="dateinput09">
</div>
<br/><br/>
<div class="Dateinput" data-pickerposition="top | left">
top | left : <input id="dateinput10">
</div>
<div class="Dateinput" data-pickerposition="top | right">
top | right : <input id="dateinput11">
</div>
data-placeholder
IE 에서는 10 버젼 이후부터 사용 가능합니다.
- "true"
- dateinput 컴포넌트의 날짜 형식을 placeholder로 보여줍니다.
<div class="Dateinput" data-placeholder="true" data-format="MM/dd/yyyy">
<input id="dateinput14">
</div>
data-resetbutton
- "true"
- input element에 삭제 버튼을 생성합니다.
<div class="Dateinput" data-resetbutton="true">
<input id="dateinput05">
<div class="Clear" id="dateinputDiv05">x</div>
</div>
data-selectmonth
- "true"
- 달 선택을 위해 셀렉트 박스를 사용합니다.
Select Element for Year / Month
<div class="Dateinput" data-selectyear="true" data-selectmonth="true">
<input id="dateinput12">
</div>
data-selectyear
- "true"
- 년도 선택을 위해 셀렉트 박스를 사용합니다.
data-startweekday
한주의 시작요일 설정하는 속성입니다. data-pickertype이 "daily", "weekly" 일때 사용가능합니다.
"sun"
- 한주의 시작요일이 일요일 (default)
"mon"
- 한주의 시작요일이 월요일
<div class="Dateinput" data-startweekday="mon">
<input id="dateinput19">
</div>
$a.setup, set/getOption API에 사용할 수 있는 옵션 정보입니다.
blockkey
clickselect
defaultdate
disabled
format
- data-format 참고
inputwidth
maxdate
- data-maxdate 참고
mindate
- data-mindate 참고
pickertype
pickerposition
placeholder
resetbutton
selectmonth
selectyear
startweekday
.clear()
dateinput 컴포넌트의 텍스트를 삭제하는 함수입니다. 함수 사용 후 change 이벤트가 발생합니다.
<div id="date2" class="Dateinput">
<input id="dateinput19">
</div>
<button id="btn_clear" class="Button">clear()</button>
$("#btn_clear").on("click", function (){
$('#date2').clear();
});
.getOptions()
Dateinput에 설정된 옵션값을 모두 가져올 수 있습니다.
- Return {object}
- object
- Dateinput에 설정된 옵션을 key-value로 가지는 오브젝트를 리턴합니다.
- object
//Dateinput에 설정된 모든옵션값을 가져옵니다.
$('#Dateinput').getOptions();
.setEnabled(enabled)
dateinput 컴포넌트를 활성화/비활성화할 수 있는 함수입니다.
- parameter
- enabled {boolean}
- "true" Required.
- dateinput 컴포넌트를 활성화 합니다.
<div id="date1" class="Dateinput">
<input id="dateinput17">
</div>
<button id="btn_setEnabledFalse" class="Button" >setEnabled(false)</button>
<button id="btn_setEnabledTrue" class="Button" >setEnabled(true)</button>
$("#btn_setEnabledFalse").on("click", function (){
$('#date1').setEnabled(false);
});
$("#btn_setEnabledTrue").on("click", function (){
$('#date1').setEnabled(true);
});
.setOptions(options)
Dateinput에 동적으로 옵션을 설정합니다.
- Parameters
- options {object}
- Dateinput에 설정된 옵션을 key-value로 가지는 오브젝트를 입력합니다.
- options {object}
$('#Dateinput').setOptions({
selectmonth: true,
selectyear: true
});
.update(JSON option)
dateinput 컴포넌트에서 보여지는 datepicker 컴포넌트의 옵션을 동적으로 설정합니다.
- parameter
- option {JSON} Required.
- 자세한 datepicker 옵션 사용법은 showDatePicker 옵션을 참고하세요.
- option {JSON} Required.
<div id="date3" class="Dateinput">
<input id="dateinput18">
</div>
<button id="btn_update1" class="Button">월별 선택</button>
<button id="btn_update2" class="Button">일별 선택+연도 셀렉트</button>
<button id="btn_update3" class="Button" >Position 설정</button>
$("#btn_update1").on("click", function (){
$('#date3').update({pickertype: 'monthly', selectyear: false, selectmonth: false}); // 월별 선택 달력
});
$("#btn_update2").on("click", function (){
$('#date3').update({pickertype: 'daily', selectyear: true, selectmonth: true}); // 일별 선택 + 연도,월 셀렉트 달력
});
$("#btn_update3").on("click", function (){
$('#date3').update({position: 'top | right'}); // position 위치 설정
});
Weekday Basic
data-format에 요일(EEE 혹은 EEEE)을 포함하여 사용하면 됩니다. data-format에 대한 자세한 내용은 DateFormat을 참고하세요.
<div class="Daterange">
<div class="Dateinput" data-format="yyyy/MM/dd EEE요일" data-inputwidth="auto" data-resetbutton="true">
<input id="dateinput22">
<div class="Clear">x</div>
<div class="Calendar" id="dateinput23"></div>
</div>
</div>
<div class="Dateinput" id="date_en" data-format="EEEE MM/dd/yyyy" data-inputwidth="auto">
<input id="dateinput24">
<div class="Calendar" id="dateinput25"></div>
</div>
$("#date_en").update({locale:'en'});
$a.setup API를 통해서 DateInput 기본 속성을 공통으로 설정합니다.
$a.setup('dateinput', {
locale : 'ko',
format : 'dd-MM-yyyy'
});
- locale {string}
- 'ko'(default) | 'en' | 'zh' | 'ja'
- locale 속성은 $a.setup 다국어설정을 통해서 Alopex UI 공통으로도 적용 가능합니다.
- format {string}
- 'yyyy-MM-dd' (default)
- 설정한 포맷 형태로 텍스트가 입력됩니다. DateFormat 사용법
- 'yyyy-MM-dd' (default)