DatePicker 라이브러리 변경(jQuery UI -> bootstrap-datepicker)
parent
af406fc158
commit
83b01dc2eb
@ -0,0 +1,80 @@
|
|||||||
|
$.fn.datepicker.makeTemplate = function(){
|
||||||
|
this.DPGlobal.template = '<div class="datepicker">'+
|
||||||
|
'<div class="datepicker-days">'+
|
||||||
|
'<table class="table-condensed">'+
|
||||||
|
this.DPGlobal.headTemplate+
|
||||||
|
'<tbody></tbody>'+
|
||||||
|
this.DPGlobal.footTemplate+
|
||||||
|
'</table>'+
|
||||||
|
'</div>'+
|
||||||
|
'<div class="datepicker-months">'+
|
||||||
|
'<table class="table-condensed">'+
|
||||||
|
this.DPGlobal.headTemplate+
|
||||||
|
this.DPGlobal.contTemplate+
|
||||||
|
this.DPGlobal.footTemplate+
|
||||||
|
'</table>'+
|
||||||
|
'</div>'+
|
||||||
|
'<div class="datepicker-years">'+
|
||||||
|
'<table class="table-condensed">'+
|
||||||
|
this.DPGlobal.headTemplate+
|
||||||
|
this.DPGlobal.contTemplate+
|
||||||
|
this.DPGlobal.footTemplate+
|
||||||
|
'</table>'+
|
||||||
|
'</div>'+
|
||||||
|
'<div class="datepicker-decades">'+
|
||||||
|
'<table class="table-condensed">'+
|
||||||
|
this.DPGlobal.headTemplate+
|
||||||
|
this.DPGlobal.contTemplate+
|
||||||
|
this.DPGlobal.footTemplate+
|
||||||
|
'</table>'+
|
||||||
|
'</div>'+
|
||||||
|
'<div class="datepicker-centuries">'+
|
||||||
|
'<table class="table-condensed">'+
|
||||||
|
this.DPGlobal.headTemplate+
|
||||||
|
this.DPGlobal.contTemplate+
|
||||||
|
this.DPGlobal.footTemplate+
|
||||||
|
'</table>'+
|
||||||
|
'</div>'+
|
||||||
|
'</div>';
|
||||||
|
};
|
||||||
|
|
||||||
|
$.fn.datepicker.addKo = function(){
|
||||||
|
|
||||||
|
this.dates['ko'] = {
|
||||||
|
days: ["일","월","화","수","목","금","토"],
|
||||||
|
daysShort: ["일","월","화","수","목","금","토"],
|
||||||
|
daysMin: ["일","월","화","수","목","금","토"],
|
||||||
|
months: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
|
||||||
|
monthsShort: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
|
||||||
|
today: "오늘",
|
||||||
|
clear: "지우기",
|
||||||
|
titleFormat: "yyyy년 MM"
|
||||||
|
};
|
||||||
|
|
||||||
|
this.defaults.language = 'ko';
|
||||||
|
this.defaults.rtl = false;
|
||||||
|
this.defaults.format = 'yyyy-mm-dd';
|
||||||
|
|
||||||
|
this.defaults.autoclose = true;
|
||||||
|
this.defaults.clearBtn = true;
|
||||||
|
this.defaults.todayBtn = 'linked';
|
||||||
|
this.defaults.keyboardNavigation = false;
|
||||||
|
this.defaults.maxViewMode = 2;
|
||||||
|
this.defaults.todayHighlight = true;
|
||||||
|
this.defaults.weekStart = 0;
|
||||||
|
this.defaults.disableTouchKeyboard = true;
|
||||||
|
this.defaults.enableOnReadonly = false;
|
||||||
|
this.defaults.immediateUpdates = true;
|
||||||
|
|
||||||
|
this.DPGlobal.footTemplate = '<tfoot>'+
|
||||||
|
'<tr>'+
|
||||||
|
'<th colspan="7">'+
|
||||||
|
'<button type="button" class="today" style="float:left;margin-right:3px;border: black solid 1px;border-radius: 5px;"></button>'+
|
||||||
|
'<button type="button" class="clear" style="float:left;margin-right:3px;border: black solid 1px;border-radius: 5px;"></button>'+
|
||||||
|
'</th>'+
|
||||||
|
'</tr>'+
|
||||||
|
'</tfoot>';
|
||||||
|
this.makeTemplate();
|
||||||
|
}
|
||||||
|
|
||||||
|
$.fn.datepicker.addKo();
|
||||||
@ -1,47 +0,0 @@
|
|||||||
/* 해당 #3f51b5 색상코드 변경 시 디자인 일괄적용 */
|
|
||||||
|
|
||||||
|
|
||||||
/* datepicker Style */
|
|
||||||
.ui-datepicker { width: 270px; padding: 0; display: none; border: 0; margin-top: 10px;}
|
|
||||||
.ui-widget.ui-widget-content { border: 0; border-radius: 3px; overflow: hidden; background: #fff; box-shadow: 0 0 8px rgba(0,0,0,0.3) }
|
|
||||||
.ui-datepicker .ui-widget-header { position: relative; padding: 6px 0 36px 0; border: 0; background: #3f51b5; color: #fff; border-radius: 0; }
|
|
||||||
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 70px; height: 26px; line-height: 26px; background: rgba(0,0,0,0.15) url(images/arrow-button.png) 100% -27px no-repeat; margin: 0 4px; padding: 0 6px; border: 0; border-radius: 3px; color: #fff; font-size: 13px; font-weight: bold; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* 화살표 없애기 */ }
|
|
||||||
.ui-datepicker select.ui-datepicker-month:hover, .ui-datepicker select.ui-datepicker-year:hover { background: rgba(0,0,0,0.3) url(images/arrow-button.png) 100% -27px no-repeat; }
|
|
||||||
.ui-datepicker select::-ms-expand {
|
|
||||||
display: none; /* 화살표 없애기 for IE10, 11*/
|
|
||||||
}
|
|
||||||
.ui-datepicker .ui-datepicker-title { line-height: 1.8em; text-align: center; margin: 0px 2.3em; font-size:13px; font-weight:bold; letter-spacing:0; }
|
|
||||||
.ui-datepicker-title .ui-datepicker-year option, .ui-datepicker-title .ui-datepicker-month option { background: #fff; color: #333; }
|
|
||||||
.ui-datepicker-title .ui-datepicker-year { }
|
|
||||||
.ui-datepicker-title .ui-datepicker-month { }
|
|
||||||
.ui-datepicker .ui-datepicker-calendar { position: relative; width: 260px; padding-top: 100px; margin: 0 auto; }
|
|
||||||
.ui-datepicker-calendar thead tr { position: absolute; top: -24px; left: 5px; right: 5px; }
|
|
||||||
.ui-datepicker-calendar thead th { float: left; display: block; padding: 0; width: 14.2857%; color: #fff; font-size:11px; letter-spacing:1px; opacity: 0.6 }
|
|
||||||
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { position: absolute; top: 5px; width: 1.8em; height: 1.8em; text-indent: -9999px; cursor: pointer }
|
|
||||||
.ui-datepicker .ui-datepicker-prev { left: 5px; }
|
|
||||||
.ui-datepicker .ui-datepicker-prev.ui-state-hover { background: rgba(0,0,0,0.1); border: 0; }
|
|
||||||
.ui-datepicker .ui-datepicker-prev .ui-icon { background: url(images/arrow-button.png) 0 0 no-repeat; }
|
|
||||||
.ui-datepicker .ui-datepicker-next { right: 5px; }
|
|
||||||
.ui-datepicker .ui-datepicker-next.ui-state-hover { background: rgba(0,0,0,0.1); border: 0; }
|
|
||||||
.ui-datepicker .ui-datepicker-next .ui-icon { background: url(images/arrow-button.png) -16px 0 no-repeat; }
|
|
||||||
.ui-datepicker .ui-state-default { display: block; border: 0; border-radius: 15px; width: 30px; height: 30px; line-height: 30px; padding: 0; margin: 4px auto; font-size: 12px; text-align: center; background: #fff; font-weight: normal; color: #333; box-sizing: border-box; }
|
|
||||||
.ui-datepicker .ui-state-default.ui-state-hover { background: rgba(0,0,0,0.05); }
|
|
||||||
.ui-datepicker-today .ui-state-default { color: #3f51b5; font-weight: bold; }
|
|
||||||
.ui-datepicker-current-day .ui-state-default { background: #3f51b5 !important; color: #fff; font-weight: bold; }
|
|
||||||
.ui-datepicker-buttonpane { overflow: hidden; border-top: 1px solid #eee; }
|
|
||||||
.ui-datepicker-buttonpane button[data-handler="today"] { color: #3f51b5; opacity: 0.75; }
|
|
||||||
.ui-datepicker-buttonpane button[data-handler="hide"] { }
|
|
||||||
|
|
||||||
/* ie add Style */
|
|
||||||
.ui-datepicker td, .ui-datepicker th { border: 0 }
|
|
||||||
.ui-datepicker .ui-datepicker-buttonpane button { float: right; cursor: pointer; width: auto; margin: 0.5em 0.2em 0.4em; padding: 0.2em 0.6em 0.3em; overflow: visible; }
|
|
||||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { float: left; }
|
|
||||||
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-clear { float: left; }
|
|
||||||
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; }
|
|
||||||
.ui-corner-all { border-radius: 3px; }
|
|
||||||
.ui-icon { display: block; width: 16px; height: 16px; }
|
|
||||||
|
|
||||||
/* mobile Responsive */
|
|
||||||
@media screen and (max-width:480px) {
|
|
||||||
.ui-datepicker { width: 270px !important; left: 50% !important; margin-left: -135px !important; }
|
|
||||||
}
|
|
||||||
@ -1,23 +0,0 @@
|
|||||||
/**
|
|
||||||
* datepicker 설정
|
|
||||||
*/
|
|
||||||
$.datepicker.regional["ko"] = {
|
|
||||||
dateFormat: 'yy-mm-dd',
|
|
||||||
prevText: '이전달',
|
|
||||||
nextText: '다음달',
|
|
||||||
currentText: '오늘',
|
|
||||||
closeText: '닫기',
|
|
||||||
monthNames: ["1월(JAN)","2월(FEB)","3월(MAR)","4월(APR)","5월(MAY)","6월(JUN)", "7월(JUL)","8월(AUG)","9월(SEP)","10월(OCT)","11월(NOV)","12월(DEC)"],
|
|
||||||
monthNamesShort: ["1월","2월","3월","4월","5월","6월", "7월","8월","9월","10월","11월","12월"],
|
|
||||||
dayNames: ["일","월","화","수","목","금","토"],
|
|
||||||
dayNamesShort: ["일","월","화","수","목","금","토"],
|
|
||||||
dayNamesMin: ["일","월","화","수","목","금","토"],
|
|
||||||
changeMonth: true, // month 셀렉트박스 사용
|
|
||||||
changeYear: true, // year 셀렉트박스 사용
|
|
||||||
weekHeader: "Wk",
|
|
||||||
firstDay: 0,
|
|
||||||
isRTL: false,
|
|
||||||
showMonthAfterYear: true,
|
|
||||||
yearSuffix: ""
|
|
||||||
};
|
|
||||||
$.datepicker.setDefaults($.datepicker.regional["ko"]);
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.2 KiB |
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue