1.
그래서 얼마전까지 사용했던 방법은 jquery 초기화 옵션중에
showButtonPanel: true, // 캘린더 하단에 버튼 패널을 표시한다.
showButtonPanel 옵션을 true로 주면이렇게 [오늘날짜]와 [닫기] 버튼이 최초에 생긴다.
2. 이 닫기 버튼의 이름을 clear로 변경
3. 닫기 버튼을 눌렀을때 해당 input text를 clear해주는 이벤트를 bind 해준다.
closeText: 'clear'
,onClose: function (dateText, inst) {
if ($(window.event.srcElement).hasClass('ui-datepicker-close'))
{
document.getElementById(this.id).value = '';
}
}
이렇게 하면 ~ie엣지, 크롬에선 정상적으로 동작한다.
문제는 firefox에서는
라 에러가 생김
기존에 onClose 안에 준 이벤트 자체가 현재 이벤트가 일어나는 엘리먼트의 클래스를 여부를 판단하는것인다. window.event 자체가 firefox에서는 존재 하지 않아 해당라인에서 error발생
구글링 후 가장 깔끔하게 처리되는것은
function cleanDatepicker(){ var old_fn = $.datepicker._updateDatepicker; $.datepicker._updateDatepicker = function(inst) { old_fn.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'>clear</button>").appendTo(buttonPane).click(function(ev) { $.datepicker._clearDate(inst.input); }) ; } }
위 함수를 선언 후 datepicker init 하기전에 한번 실행해주는 것이 가장 브라우저도 안타고 잘 동작하게 해결하는 방법이었습니다.
4. 해당 함수를 실행하고
5. 기존에 clear버튼을 "닫기" 버튼으로 변경
6. onClose에 bind했던 함수는 제거하면
아래와 같이 버튼 3개가 생기고 각 버튼들이 잘 동작 하는걸 확인 할 수 있다.