Реализация JQuery DatePicker в Bootstrap модальный

Question

Создано jsfiddle для моего вопроса http://jsfiddle.net/sudiptabanerjee/93eTU/

В модальном окне выпуска на изменение месяц и изменение года комбо.

a) IE 11: все работает как ожидалось b) Chrome версии 31, в комбинированном блоке, ботстрап модальные шкуры. c) Выпадающее окно Firefox v26, Month и Year не работает.

Пожалуйста, помогите.

HTML

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
      <h4 class="modal-title" id="myModalLabel">Modal title</h4> 

     </div> 
     <div class="modal-body"> 
      <div class="col-md-12"> 
       <div class="row"> 
        <label for="idTourDateDetails">Tour Start Date:</label> 
        <div class="form-group"> 
         <div class="input-group"> 
          <input type="text" name="idTourDateDetails" id="idTourDateDetails" readonly="readonly" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span> 

         </div> 
        </div>Alt Field: 
        <input type="text" name="idTourDateDetailsHidden" id="idTourDateDetailsHidden"> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

CSS

.clsDatePicker { 
z-index: 100000; 
} 

JS

$('#idTourDateDetails').datepicker({ 
dateFormat: 'dd-mm-yy', 
minDate: '+5d', 
changeMonth: true, 
changeYear: true, 
altField: "#idTourDateDetailsHidden", 
altFormat: "yy-mm-dd" 
}); 

Answer 1

Это происходит потому, что модальные навязывает сосредоточиться на себе. Вот решение для этого, как упомянуто here. Добавьте скрипт ниже в файл js. Вот и все.

Working Demo

JQuery

// Since confModal is essentially a nested modal it's enforceFocus method 
// must be no-op'd or the following error results 
// "Uncaught RangeError: Maximum call stack size exceeded" 
// But then when the nested modal is hidden we reset modal.enforceFocus 
var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; 

$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 

$confModal.on('hidden', function() { 
    $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; 
}); 

$confModal.modal({ backdrop : false }); 

Answer 2

Строительство от ответа Surjith, я добавил попытку/поймать блок разрешить исключение ReferenceError для confModal быть неопределенным.

CoffeeScript:

enforceModalFocusFn = $.fn.modal.Constructor::enforceFocus 

$.fn.modal.Constructor::enforceFocus = -> 

try 
    $confModal.on "hidden", -> 
    $.fn.modal.Constructor::enforceFocus = enforceModalFocusFn 
    return 
    $confModal.modal backdrop: false 
catch error 
    if error.name != 'ReferenceError' 
    throw error 

Answer 3

jQuery версия @crftr ответ

var enforceModalFocusFn = $.fn.modal.Constructor.prototype.enforceFocus; 
$.fn.modal.Constructor.prototype.enforceFocus = function() {}; 
try{ 
    $confModal.on('hidden', function() { 
     $.fn.modal.Constructor.prototype.enforceFocus = enforceModalFocusFn; 
    }); 
    $confModal.modal({ backdrop : false }); 
} 
catch (error) { 
    if(error.name != 'ReferenceError') 
     throw error; 
} 

Answer 4

Спокойнее ... просто нужно закомментировать эту строку в ваш boostrap.js that.enforceFocus().