Component
DatePicker
날짜를 선택하고 그에 해당하는 데이터를 얻을 수 있는 달력 컴포넌트입니다. 선택 가능 범위는 1900-01-01부터 2100-12-31이며 연도, 월을 각각 조절할 수 있으며 4가지 Locale(한국어, 영어, 일본어, 중국어)을 지원합니다.
파라미터는 선택한 날짜 데이터를 리턴 받는 콜백 함수와 DatePicker 구성에 필요한 옵션입니다. 콜백 함수는 필수이며 옵션은 선택입니다.
<input id="result1" type="text" class="Textinput">
<input type="button" id="btn_basic" class="Button" value="Show DatePicker">
$('#btn_basic').on('click', function (){
$('#btn_basic').showDatePicker(function(date, dateStr){
//set selected date to text input
$("#result1").val(dateStr);
});
});
DateFormat
Type | Format | 설명 | 결과 |
---|---|---|---|
연도 | yy | 연도 뒤의 2자리 | 12 |
yyyy | 연도 전체 4자리 | 2012 | |
월 | M | 월 1자리 | 8 |
MM | 월 2자리 | 08 | |
MMM | 월 약식 문자열 | Aug 또는 8 | |
MMMM | 월 전체 문자열 | August 또는 8 | |
일 | d | 일 1자리 | 3 |
dd | 일 2자리 | 03 | |
요일 | EEE | 요일 약식 문자열 | Tue 또는 화 |
EEEE | 요일 전체 문자열 | Tuesday 또는 화 |
Keyboard Support
Keyboard를 통해서 DatePicker를 사용할 수 있습니다. Key 정보는 아래와 같습니다. 정의되지 않은 Key를 누를 경우 DatePicker가 닫히게 됩니다
Keyboard | 설명 | 비고 |
---|---|---|
Tab, Shift+Tab | DatePicker 내의 다음, 이전 Element로 이동 | DatePicker Container에서 Shift+Tab 수행 시 close됨 |
↑(Up) | 이전 주로 이동 | 이동될 주가 이전 월일 경우 이전 월로 이동됨. |
↓(Down) | 다음 주로 이동 | 이동될 주가 다음 월일 경우 다음 월로 이동됨. |
→(Right) | 다음 일로 이동 | 이동될 일이 다음 월일 경우 다음 월로 이동됨. |
←(Left) | 이전 일로 이동 | 이동될 일이 이전 월일 경우 이전 월로 이동됨. |
PageDown | 다음 월로 이동 | |
PageUp | 이전 월로 이동 | |
Shift + PageUp | 이전 연도로 이동 | |
Shift + PageDown | 다음 연도로 이동 | |
Home | 현재 월의 첫번째 일로 이동 | |
End | 현재 월의 마지막 일로 이동 | |
Ctrl + Home | 초기 날짜로 이동 | 초기 지정한 날짜가 있을 경우 지정된 날짜로 이동. 그 외는 오늘 날짜로 이동됨. |
Esc | DatePicker를 Close. | |
Enter, Space | Focus된 control button 또는 날짜를 선택 | 날짜 선택 시 초기 지정한 callback 함수가 호출됨. 그외의 control button은 해당 기능이 수행 됨. |
Related components
DatePicker를 활용할 수 있는 관련 컴포넌트들은 다음과 같습니다.
class="Dateinput"
을 선언하면 아래와 같은 컴포넌트를 사용할 수 있습니다.
<div class="Dateinput" data-format="MM/dd/yyyy">
<input id="datepicker01">
</div>
class="Daterange"
을 선언하면 아래와 같은 시작일과 종료일을 선택할 수 있는 input을 사용할 수 있습니다.
<div class="Daterange" data-default-date="false">
From
<div class="Startdate Dateinput">
<input id="datepicker02">
</div>
~ To
<div class="Enddate Dateinput">
<input id="datepicker03">
</div>
</div>
.closeDatePicker()
DatePicker 컴포넌트를 동적으로 닫는 함수입니다.
<div>
<input id="result_show" type="text" class="Textinput">
<input type="button" id="showdp" class="Button" value="Show DatePicker">
<input type="button" id="closedp" class="Button" value="Close DatePicker">
</div>
$('#showdp').on('click', function (){
$('#showdp').showDatePicker(function(date, dateStr){
//set selected date to text input
$("#result_show").val(dateStr);
});
});
$('#closedp').on('click', function (){
$("#result_show").closeDatePicker();
});
.showDatePicker(function callback, JSON option)
DatePicker가 선택한 element 아래에 보여지게 되며 option 값에 따라 다른 형태의 달력으로 동작합니다.
option 항목들은 $a.setup 함수를 사용하여 공통 설정이 가능합니다.
- parameter
- callback {function} Required.
- 선택한 날짜 데이터를 return 받는 함수입니다.
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정합니다. 아래 date, locale, format의 key에 value를 설정합니다.
- selectyear {Boolean}
- 년도 선택을 위해 select box를 사용합니다.
- selectmonth {boolean}
- 달 선택을 위해 select box를 사용합니다.
- selectyear {Boolean}
- DatePicker의 초기 선택 날짜, Locale, Format을 설정합니다. 아래 date, locale, format의 key에 value를 설정합니다.
- callback {function} Required.
<input id="result2" type="text" class="Textinput">
<input type="button" id="btn_yearmonth" class="Button" value="년 월 셀렉트">
$('#btn_yearmonth').on('click', function (){
$('#btn_yearmonth').showDatePicker(function(date, dateStr){
$("#result2").val(dateStr);
}, {selectyear: true, selectmonth: true});
});
- parameter
- option {JSON} Optional.
- pickertype {String} optional
- Date Picker의 타입을 지정합니다.
- daily {string} (default)
- 날짜만 선택할 수 있는 달력입니다.
- monthly {string}
- 월만 선택할 수 있는 달력입니다.
- daily {string} (default)
- Date Picker의 타입을 지정합니다.
- pickertype {String} optional
- option {JSON} Optional.
<button id="button1" class="Button">show Monthly picker</button>
<input id="input1" type="text" class="Textinput"/>
$('#button1').on('click', function(){
$('#button1').showDatePicker(function(date, dateStr){
$("#input1").val(dateStr);
}, {
pickertype:'monthly',
format: 'yyyy-MM'
});
});
- parameter
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- inline {Boolean} optional
- datepicker를 팝업 형식이 아닌 인라인으로 사용합니다.
- inline {Boolean} optional
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- option {JSON} Optional.
<div id="datepickerArea" class="Display-inblock"></div>
<div class="Display-inblock Valign-top Padding-left-10">
<label>Result :: <input id="result_inlineDP" type="text" class="Textinput"></label>
</div>
var inlineOption = {
inline : true
};
$('#datepickerArea').showDatePicker(onInlineDatePicked, inlineOption);
function onInlineDatePicked(date, dateStr){
$('#result_inlineDP').val(dateStr);
}
- parameter
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- locale {String} optional
- 언어 선택
- 'ko', 'en', 'ja', 'zh'
- locale {String} optional
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- option {JSON} Optional.
<select id="locale" class="Select">
<option value="ko">한국어</option>
<option value="en">English</option>
<option value="ja">日本語</option>
<option value="zh">中國語</option>
</select>
<button id="btn_locale" class="Button">Show DatePicker</button>
<label>Result <input id="result_locale" type="text" class="Textinput"></label>
$('#btn_locale').bind('click', function (){
var localeValue = $('#locale > option:selected').val();
var option = {
locale : localeValue
};
$('#btn_locale').showDatePicker(onLocaleDatePicked, option);
});
function onLocaleDatePicked(date, dateStr){
$('#result_locale').val(dateStr);
}
- parameter
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- format {String} optional
- yyyy 년도
- MM 월
- dd 일
- EEE 요일
- format {String} optional
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- option {JSON} Optional.
<label>format <input id="inputFormat" value="yyyyMMdd EEE요일" type="text" class="Textinput"></label>
<button id="btn_format" class="Button">Show DatePicker</button>
<label>result <input id="result_format" type="text" class="Textinput"></label>
$('#btn_format').on('click', function (){
var formatValue = $("#inputFormat").val();
var option = {
format : formatValue // 미 입력 시 default는 yyyyMMdd
};
$('#btn_format').showDatePicker(onFormatDatePicked, option);
function onFormatDatePicked(date, dateStr){
$("#result_format").val(dateStr);
}
});
- parameter
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- date {JSON or Date} Optional.
- DatePicker의 초기 선택 날짜를 지정합니다.
- year {string | number} Required
- 연도
- month {string | number} Required
- 월
- day {string | number} Required
- 일
- year {string | number} Required
- DatePicker의 초기 선택 날짜를 지정합니다.
- date {JSON or Date} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- option {JSON} Optional.
Initial Date
<label><input id="year" type="text" class="Textinput" style="width:50px;">년 </label>
<label><input id="month" type="text" class="Textinput" style="width:50px;"> 월</label>
<label><input id="day" type="text" class="Textinput" style="width:50px;"> 일</label>
<button id="button" class="Button">Show DatePicker</button>
<label>Result <input id="result" type="text" class="Textinput"></label>
$('#button').bind('click', function (){
var _year = $("#year").val();
var _month = $("#month").val();
var _day = $("#day").val();
var option = {
date : { // (default : today)
year : _year,
month : _month,
day : _day
}
};
$('#button').showDatePicker(onInitialDatePicked, option);
});
function onInitialDatePicked(date, dateStr){
$("#result").val(dateStr);
}
- parameter
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- certainDates
- 특정 날짜를 지정하여 이름 및 스타일을 다르게 지정할 수 있습니다.
- certainDates
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- option {JSON} Optional.
<button id="btn_certainDate" class="Button">Show DatePicker</button>
<label>Result <input id="result_certainDate" type="text" class="Textinput"></label>
var today = new Date();
var certainYear = today.getFullYear();
var certainMonth = today.getMonth();
var certainDate = today.getDate();
$('#btn_certainDate').on('click', function (){
var option = {
certainDates : [
{
name : 'closedDay',
styleClass : 'nonBusiness', // 휴일 (빨간표시)
title : '정기휴일', //마우스 hover 시 title 툴팁
dates : [new Date(2016, (8-1), 25), // 2016년 8월 25일
new Date(certainYear, certainMonth+2, 1), // 다다음달 1일
new Date(certainYear, certainMonth, certainDate+2), // 내일모래
new Date(certainYear, certainMonth, certainDate-4), // 4일 전
new Date(certainYear, certainMonth+1, certainDate+2), // 다음달 2일 후
new Date(certainYear, certainMonth+1, certainDate-4), // 다음달 4일 전
new Date(certainYear, certainMonth-1, certainDate+2)], // 이전달 2일 후
isClickToClose : false
}, {
name : 'specialDay',
styleClass : 'special', // 특별한날 ( 체크표시)
title : '특별 휴일', //마우스 hover 시 title 툴팁
dates : [
new Date('2016/9/3'), // 2015년 9월3일
new Date(certainYear, certainMonth+2, 2), // 다다음달 2일
new Date(certainYear, certainMonth, certainDate+1), // 내일
new Date(certainYear, certainMonth, certainDate-7), // 일주일 전
new Date(certainYear, certainMonth+1, certainDate+3), // 다음달 3일 후
new Date(certainYear, certainMonth+1, certainDate-1), // 다음달 1일 전
new Date(certainYear, certainMonth-1, certainDate+4)], // 이전달 4일전
isClickToClose : true
}
]
};
$('#btn_certainDate').showDatePicker(onCertainDatePicked, option);
});
function onCertainDatePicked(date, dateStr, name){
if(name == 'closedDay'){
alert('It is not available on ' + dateStr + '\nselect another date.');
}else if(name == 'specialDay'){
alert('It is a special Day on ' + dateStr);
$('#result_certainDate').val(dateStr);
}else{
$('#result_certainDate').val(dateStr);
}
}
<style>
.nonBusiness{
background: #DC143C !important;
color: #fff !important;
}
.special{
background: #ff630e !important;
color: #fff !important;
}
</style>
- parameter
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- mindate {Date}
- 날짜 최소값
- maxdate {Date}
- 날짜 최대값
- mindate {Date}
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- option {JSON} Optional.
<div class="Margin-bottom-10">
MinDate ::
<label><input id="min_year_test" type="text" name="minDate" class="Textinput" style="width:50px;"> 년 </label>
<label><input id="min_month_test" type="text" name="minDate" class="Textinput" style="width:50px;"> 월 </label>
<label><input id="min_day_test" type="text" name="minDate" class="Textinput" style="width:50px;"> 일</label>
</div>
<div class="Margin-bottom-10">
MaxDate ::
<label><input id="max_year_test" type="text" name="maxDate" class="Textinput" style="width:50px;"> 년 </label>
<label><input id="max_month_test" type="text" name="maxDate" class="Textinput" style="width:50px;"> 월 </label>
<label><input id="max_day_test" type="text" name="maxDate" class="Textinput" style="width:50px;"> 일 </label>
</div>
<div class="Margin-bottom-10">
<button id="btn_dateRange" class="Button">Show DatePicker</button>
<label>Result :: <input id="result3" type="text" class="Textinput"></label>
</div>
$('#btn_dateRange').on('click', function (){
var minDateStr = $("#min_year_test").val() + '/' + $("#min_month_test").val() + '/' + $("#min_day_test").val();
var maxDateStr = $("#max_year_test").val() + '/' + $("#max_month_test").val() + '/' + $("#max_day_test").val();
var option = {
minDate : new Date(minDateStr),
maxDate : new Date(maxDateStr)
};
$('#btn_dateRange').showDatePicker(onMaxMinDatePicked, option);
});
function onMaxMinDatePicked(date, dateStr){
$('#result3').val(dateStr);
}
- parameter
- option {JSON} Optional.
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- showothermonth {Boolean}
- 현재 달력 빈칸에 이전/이후 달 날짜를 보이게 합니다.
- showbottom {Boolean}
- 달력 하단에 오늘 날짜를 선택할 수 있는 버튼 영역을 보여게 합니다.
- showothermonth {Boolean}
- DatePicker의 초기 선택 날짜, Locale, Format을 설정.
- option {JSON} Optional.
<div class="Display-inblock Margin-right-10 Valign-top">
<span>showothermonth: true</span>
<div id="datepickerArea2"></div>
<div class="Margin-top-10">
<label>Result :: <input id="result_inlineDP2" type="text" class="Textinput"></label>
</div>
</div>
<div class="Display-inblock">
<span>showothermonth: false, showbottom: true</span>
<div id="datepickerArea3"></div>
<div class="Margin-top-10">
<label>Result :: <input id="result_inlineDP3" type="text" class="Textinput"></label>
</div>
</div>
$('#datepickerArea2').showDatePicker(function(date, dateStr){
//set selected date to text input
$("#result_inlineDP2").val(dateStr);
}, { inline: true,
format : 'yyyy-MM-dd',
date : {
year : '2016',
month : '11',
day : '15'
},
showothermonth : true
});
$('#datepickerArea3').showDatePicker(function(date, dateStr){
//set selected date to text input
$("#result_inlineDP3").val(dateStr);
}, { inline: true,
format : 'yyyy-MM-dd',
showothermonth : false,
showbottom : true
});
- parameter
- option {JSON} Optional.
- DatePicker의 position 을 설정.
- position {String}
- "left", "right", "top", "bottom", "top | left", "top | right"
- 기본 position 은 "bottom|left" 입니다.
- position {String}
- DatePicker의 position 을 설정.
- option {JSON} Optional.
<input type="text" id="result_position" class="Textinput">
<input type="button" id="btn_position" class="Button" value="bottom | left (default)">
<input type="button" id="btn_position_right" class="Button" value="bottom | right">
<input type="button" id="btn_position_top_left" class="Button" value="top | left">
<input type="button" id="btn_position_top_right" class="Button" value="top | right">
$('#btn_position').on('click', function (){
$('#btn_position').showDatePicker(function(date, dateStr){
$("#result_position").val(dateStr);
});
});
$('#btn_position_right').on('click', function (){
$('#btn_position_right').showDatePicker(function(date, dateStr){
$("#result_position").val(dateStr);
}, {position : "right"});
});
$('#btn_position_top_left').on('click', function (){
$('#btn_position_top_left').showDatePicker(function(date, dateStr){
$("#result_position").val(dateStr);
}, {position : "top"});
});
$('#btn_position_top_right').on('click', function (){
$('#btn_position_top_right').showDatePicker(function(date, dateStr){
$("#result_position").val(dateStr);
}, {position : "top|right"});
});
- parameter
- option {JSON} Optional.
- DatePicker의 WEEK시작요일을 설정.
- startweekday {String}
- "sun" 또는 "mon" 값으로 설정.
- 기본 startweekday 은 "sun" 입니다.
- startweekday {String}
- DatePicker의 WEEK시작요일을 설정.
- option {JSON} Optional.
<input id="result_start" type="text" class="Textinput">
<input type="button" id="btn_startday" class="Button" value="월요일이 시작일">
$('#btn_startday').on('click', function (){
$('#btn_startday').showDatePicker(function(date, dateStr){
$("#result_start").val(dateStr);
}, {startweekday: "mon"});
});
$a.setup API를 통해서 DatePicker 기본 속성을 공통으로 설정합니다.
$a.setup('datepicker', {
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)