datepicker 삭제 버튼(firefox 오류수정 버전)

jquery datepicker를 사용 할 경우 해당 input text를 삭제버튼으로 한번에 내용을 제거 하고 싶을때가 있다.

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개가 생기고 각 버튼들이 잘 동작 하는걸 확인 할 수 있다.