본문바로가기

Component

DateInput

Basic

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>

Attributes

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"
    • '월'단위로 선택할 수 있는 달력 입니다.
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을 설정할 때 사용합니다.
bottom | left (default) :
bottom | right :


top | left :
top | right :
<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에 삭제 버튼을 생성합니다.
x
<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>

Options

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

blockkey

clickselect

defaultdate

disabled

format

inputwidth

maxdate

mindate

pickertype

pickerposition

placeholder

resetbutton

selectmonth

selectyear

startweekday

Functions

.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로 가지는 오브젝트를 리턴합니다.
//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로 가지는 오브젝트를 입력합니다.
$('#Dateinput').setOptions({
	selectmonth: true,
	selectyear: true
});

.update(JSON option)

dateinput 컴포넌트에서 보여지는 datepicker 컴포넌트의 옵션을 동적으로 설정합니다.

  • parameter
    • option {JSON} Required.
      • 자세한 datepicker 옵션 사용법은 showDatePicker 옵션을 참고하세요.
<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 Example

Weekday Basic

data-format에 요일(EEE 혹은 EEEE)을 포함하여 사용하면 됩니다. data-format에 대한 자세한 내용은 DateFormat을 참고하세요.


x
<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'});

Setup

$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)