jQuery datepicker 숨기기

Question

작은 이미지를 클릭 할 때 datepicker를 렌더링하고 날짜를 선택한 다음 선택한 날짜를 사용하여 선택한 날짜를 기준으로 연도, 월 및 일의 선택 요소 그룹을 채 웁니다. onSelect 부분을 알아 냈고 select 요소의 옵션에 선택한 날짜를 적용했습니다.

내 문제는 datepicker가 날짜 선택을 닫지 않는다는 것입니다. 거기에 머물러 있습니다. hide() 메서드를 호출하면 이미지 (스팬 요소의 일부)도 숨겨집니다.

$("#pickupCalendar").click(function() { 
    $("#pickupCalendar").datepicker({ 
     dateFormat: 'dd-mm-yy', 
     onSelect: function (dateText, inst) { 
      //code to fill the other elements with the selected date goes here 
      $("#pickupCalendar").datepicker().hide(); //<-- hides the image (span element along with the datepicker) 
     } 
    }); 
}); 

Answer 1

HTML 마크 업이 변경되어 요소를 쉽게 타겟팅 할 수 있습니다.

<span id="pickupCalendar"></span><button>Button</button> 

    $("button").click(function() { 
     $("#pickupCalendar").show(); 
     $("#pickupCalendar").datepicker({ 
      dateFormat: 'dd-mm-yy', 
      onSelect: function (dateText, inst) { 
       //code to fill the other elements with the selected date goes here 
       $("#pickupCalendar").datepicker().hide(); 
      } 
     }); 
    }); 

FIDDLE

Answer 2

당신이 시도 할 수 :

<span id="pickupCalendar"><img src="/images/calendar.png"></img></span> 

이 스크립트는 다음과 같습니다이 내 HTML 코드?

$("#pickupCalendar").click(function() { 
    $("#pickupCalendar").datepicker({ 
     dateFormat: 'dd-mm-yy', 
     onSelect: function (dateText, inst) { 
      //code to fill the other elements with the selected date goes here 
      $("#pickupCalendar").datepicker().hide(); 
      $("#pickupCalendar img").hide(); 
     } 
    }); 
});