인풋태그 날짜 입력할때 달력(캘린더)에서 선택하여 사용하는 소스
기본적으로 필요한 js파일과 css파일
|
1
2
|
<script type='text/javascript' src='/jquery-ui.js'></script>
<link rel='stylesheet' type='text/css' href='/jquery-ui.css'/>
|
필요한건 class="datePicker"이며 id를 생략하면 안된다. 안쓰더라도 name값과 같은 값으로 세팅한다.
|
1
|
<input type="text" name="last_job_day" id="last_job_day" class="datePicker" />
|
달력폼을 어떻게 보여줄것인지 설정한다. (옵션 설정)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$(function() {
$('.datePicker').datepicker({
dateFormat: 'yy-mm-dd', // 날짜표현타입
monthNamesShort: ['1월','2월','3월','4월','5월','6월','7월','8월','9월','10월','11월','12월'],
dayNamesMin: ['일','월','화','수','목','금','토'],
weekHeader: 'Wk',
changeMonth: true, //월변경가능
changeYear: true, //년변경가능
showMonthAfterYear: true, //년 뒤에 월 표시
buttonImageOnly: true, //달력 이미지표시
buttonImage: '<?php echo _SITE_COMMON_LIB?>/script/images/calendar.gif', // 달력 이미지파일
buttonText: '날짜를 선택하세요', // 달력이미지에 마우스오버일경우
autoSize: false, //오토리사이즈(body등 상위태그의 설정에 따른다)
showOn: 'both', //엘리먼트와 이미지 동시 사용
showButtonPanel:true, // 캘린더 하단에 버튼 패널을 표시한다(오늘날짜로이동버튼, 닫기버튼).
currentText: '오늘', // 오늘날짜로이동되는 버튼의 텍스트 변경
showAnim: "slideDown", //애니메이션을 적용한다.
closeText: '닫기', // 닫기버튼의 텍스트 변경
// 연도 셀렉트 박스 범위(현재연도의 - + 20연도)
yearRange: (datepicker_year.getFullYear()-20) + ':' + (datepicker_year.getFullYear()+20),
//firstDay: 0, // 주의 시작일을 일요일로 하려면 0, 월요일은 1 (기본값 0)
//isRTL: false, // 버튼이미지 좌우 위치
cleanText: '지우기' //추가한 기능 jquery-ui.js 파일에 소스 추가해아한다.
});
});
|
datePicker의 모든 기본값은 영어이므로 옵션을 주어 한글로 변환 시켜준다.
showMonthAfterYear: true, 옵션을 주면 아래처럼 영역이 추가된다.
cleanText: '지우기' 옵션은 존재하지 않는다.
달력폼에서 날짜가 입력된 후 데이터를 지우고 싶은데 그런 기능은 존재 하지 않아 만들어 놓은 기능으로 js파일에 기능을 추가하여야 한다.
clean 기능 추가하기
jquery-ui.js을 연다.
ui-datepicker-close를 찾는다.(하나밖에 없음)
3항 연산자로 구성된 버튼태그가 보인다. 위의 닫기 버튼이다.
해당버튼소스 뒤로 아래의 버튼소스를 입력한다.
<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all' data-handler='clean' data-event='click'>" + this._get(inst, "cleanText") + "</button>
|
1
2
3
|
controls = (!inst.inline ? "<button type='button' class='ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all' data-handler='hide' data-event='click'>" +
this._get(inst, "closeText") + "</button><button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all' data-handler='clean' data-event='click'>" +
this._get(inst, "cleanText") + "</button>" : "");
|
버튼생성시 설정한 handler='clean' 와 cleanText 기능을 만들어준다.
Datepicker() 함수를 찾는다.
아래처럼 closeText: "Done", 밑에 cleanText: "clean",를 추가한다. (기본값 설정)
이제 옵션으로 cleanText:를 주어 원하는 텍스트로 변경가능하다.
|
1
2
3
4
5
|
function Datepicker() {
this._curInst = null; // The current instance in use
// 생략 //
closeText: "Done", // Display text for close link
cleanText: "clean",
|
__attachHandlers: function(inst) 을 찾는다.
아래 소스처럼
clean: function () {
window["DP_jQuery_" + dpuuid].datepicker._clearDate(inst.input);
},
을 추가한다. (인풋에 입력된 데이터를 삭제해주는 기능)
|
1
2
3
4
5
6
7
8
9
10
11
12
|
_attachHandlers: function(inst) {
var stepMonths = this._get(inst, "stepMonths"),
id = "#" + inst.id.replace( /\\\\/g, "\\" );
inst.dpDiv.find("[data-handler]").map(function () {
var handler = {
// 생략 //
hide: function () {
window["DP_jQuery_" + dpuuid].datepicker._hideDatepicker();
},
clean: function () {
window["DP_jQuery_" + dpuuid].datepicker._clearDate(inst.input);
},
|
js파일에 굳이 소스를 추가할 필요는 없다.
js파일을 집적 받아 서버에 저장되어 있고 소스가 따로 분리되어 있는게 싫어서 해놓은것 뿐이다.
cdn 링크방식일 경우에는 수정을 할 수 없기도 하다.
오히려 아래소스가 더욱 간단하고 좋은 방법이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(function() {
var picker_update = $.datepicker._updateDatepicker;
$.datepicker._updateDatepicker = function(inst) {
picker_update.call(this, inst);
var buttonPane = $(this).datepicker("widget").find(".ui-datepicker-buttonpane");
$("<button type='button' class='ui-datepicker-clean ui-state-default ui-priority-primary ui-corner-all'>지우기</button>").appendTo(buttonPane).click(function(ev) {
$.datepicker._clearDate(inst.input);
});
}
|
추가적으로 달력의 선택날짜를 컨트롤 할 수 있는 소스다.
위에서 기본값 설정시 $('.datePicker').datepicker({ 사용하여 해당클레스 이름에 바로 적용하였지만
아 소스처럼 datepicker의 내장함수와 배열인 setDefaults(), regional[] 이용해 기본 옵션값을 설정한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$(function() {
var datepicker_year = new Date();
$.datepicker.regional['ko'] = {
dateFormat: 'yy-mm-dd',
// 생략 //
yearRange: (datepicker_year.getFullYear()-20) + ':' + (datepicker_year.getFullYear()+20),
cleanText: '지우기' // 닫기버튼의 텍스트 변경 (새로 추가한 기능 jquery-ui.js 파일에 소스 추가해아한다.)
};
$.datepicker.setDefaults($.datepicker.regional['ko'])
});
|
달력선택을 컨트롤 할 수 있는 함수를 만든다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
// 특정날짜들 배열
var disabledDays = ["2016-11-20","2016-11-21","2016-11-22"];
// 특정일 선택막기
function disableAllTheseDays(date) {
var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
for (i = 0; i < disabledDays.length; i++) {
if($.inArray(y + '-' +(m+1) + '-' + d,disabledDays) != -1) {
return [false];
}
}
return [true];
}
// 토, 일요일 선택 막기
function noWeekendsOrHolidays(date) {
var noWeekend = $.datepicker.noWeekends(date);
return noWeekend[0] ? [true] : noWeekend;
}
// 일요일만 선택 막기
function noSundays(date) {
return [date.getDay() != 0, ''];
}
// 이전 날짜들은 선택막기
function noPreviousdate(date){
if (date < new Date())
return [false];
return [true];
}
|
아래의 소스처럼 해당 id에 datepicker()함수를 실행시킨다.
기본옵션은 위에서 설정하였으므로 옵션을 줄 필요는 없고 추가적인 옵션을 부여할때 사용하면 된다.
beforeShowDay: 옵션은 사용할 함수명을 입력하면 된다.
|
1
2
3
4
5
6
7
|
<input type="text" name="last_job_day_day" id="last_job_day_day" class="datePicker" />
<script language="javascript">
$(function() {
$('#last_job_day').datepicker({maxDate: '+2y', minDate: '-2y', beforeShowDay: noSundays});
});
</script>
|
beforeShowDay옵션에 noSundays함수를 사용하여 일요일을 선택 불가능 하도록 설정한 화면이다.
기본값 설정시 yearRange:"2012:2019" 설정하였다면 maxDate와 minDate는 yearRange에 설정된 범위내에서만 사용가능하다.
'프로그래밍 > JAVA Script(jquery)' 카테고리의 다른 글
| [JAVA Script] 자바스크립트 형변환하기 Nember() String() (0) | 2020.02.26 |
|---|---|
| [jquery] 클래스 추가 삭제 addclass() removeclass() (0) | 2020.02.26 |
| keycode 표 (0) | 2016.12.09 |
