2013-03-14 7 views
4

드롭 다운 메뉴에 datepicker를 추가하고 싶습니다. 이 날짜 피커를 사용합니다 link드롭 다운 메뉴의 트위터 datepicker

다음으로 입력 선택을 클릭하면 메뉴가 닫히지 않도록 코드가 추가되어 입력이 사라집니다. 어떻게 해결할 수 있습니까? 다음 작업을 수행 할 수

$('.datepicker').datepicker({ 
    autoclose: true 
}); 

$('.dropdown-toggle').dropdown(); 
$('.jsolr-search-result-form .dropdown input, .jsolr-search-result-form .dropdown label, .jsolr-search-result-form ul span').click(function(e) { 
    e.stopPropagation(); 
}); 

답변

3

:

jQuery(function($){ 
    $('#dropdownMenu1').parent().on('hide.bs.dropdown', function(e){ 
     e.preventDefault(); 
    }); 
}); 

예 : 드롭 다운 이벤트가 부모 요소에 트리거되는 것을 http://jsfiddle.net/9qyf2/

참고. 거기에서 어떤 요소가 클릭되었는지 확인할 수 있으며 필요한 경우 기본 동작을 방지 할 수 있습니다. js 구성 요소의 부트 스트랩 설명서를 확인하십시오. http://getbootstrap.com/javascript/#dropdowns-usage

희망 사항.

1

이 중 하나는 매우 골칫거리입니다. 또한 부트 스트랩 드롭 다운 메뉴 내에 몇 개의 datepicker가 있습니다. 나는 이것을 두 가지 방법으로 해결했다.

첫 번째는 DatePicker에서이 다른, 더 permant 솔루션은 datepicker.js이 파일 자체를 변경했다

$('.yourDatePicker').on('hide', function(event) { 
    event.stopPropagation(); 
    $(this).closest('.yourDropDown').one('hide.bs.dropdown', function(ev) { 
     return false; 
    }); 
}); 

을 클릭하면 한 시간을 버블 링에서 이벤트를 중지 jQuery를 사용하지만, 당신 같은 소리 datepicker cdn을 사용 중입니다. 당신이 그것을 다운로드하고 로컬로 사용할 수있는 경우이

click: function(e){ 
    e.preventDefault(); 
    e.stopPropagation(); // <-- add this 
    var target = $(e.target).closest('span, td, th'), 
     year, month, day; 
    if (target.length === 1){ 
     switch (target[0].nodeName.toLowerCase()){ 
처럼, 당신이이 지역에 e.stopPropagation() 함수를 추가하는 경우이

click: function(e){ 
    e.preventDefault(); 
    var target = $(e.target).closest('span, td, th'), 
     year, month, day; 
    if (target.length === 1){ 
     switch (target[0].nodeName.toLowerCase()){ 
...ect... 

과 같은 코드를 찾을 열 균열 수 있습니다

귀하의 datepickers가 다른 DOM 요소와의 간섭을 멈추지 만,이 솔루션이 더 널리 퍼져 있으므로 코드의 다른 영역에는 영향을주지 않습니다.

관련 문제