jQuery Datepicker in Twitter Bootstrap 3 Modal

Question

Я сейчас пытаюсь решить несколько проблем, но я не могу заставить его работать. Я пытаюсь получить datepicker в мою форму. Форма помещается внутри мода бутстрапа, и вся вещь загружается через ajax. Все работает отлично, за исключением datepicker, который вообще не отображается при размещении в модальном режиме.

Я надеялся, что простое решение вроде: .datepicker {z-index: 9999! Important;} будет работать, но это не так. Кто-нибудь знает простое решение для этого?

Вот мой DatePicker:

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}); 

Вот моя форма:

<form action="" method="post"> 
    <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">Endre artikkel</h4> 
      </div> 
      <div class="modal-body">     
       <label for="arrived">Motatt</label> 
       <input type="text" name="arrived" class="form-control datepicker" id="arrived">          
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="submit" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
    </div> 
</form> 

форма загружается в этот DIV:

<div class="modal fade" id="load_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="z-index: 1040;"></div> 

С этим JavaScript:

function edit_article(id){ 
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id); 
} 

Answer 1

Модальное вероятно загружается после того, как вы добавите .datepicker() вы должны оценить, что код после загрузки формы.

function edit_article(id){ 
    $("#load_modal").load("load_modal.cgi?type=edit&id="+id); 
    $("#load_modal .datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
} 

Answer 2

Если вы вызываете этот код на документе готового()

$(function() { 
    $(".datepicker").datepicker({ dateFormat: "yyyy-mm-dd" }); 
    }); 

Там нет формы с DatePicker поэтому не инициализируется

вызова это еще раз после загрузки формы.

это shoudl исправить вашу проблему

Answer 3

$(function() { 
    $("#arrived").datepicker({ dateFormat: "yyyy-mm-dd" }); 
}); 

Я думаю, что вы делаете эту ошибку ....

любезно посмотреть на эту ссылку http://jsfiddle.net/TB8Yt/

Answer 4

Это звучит, как у меня точно такая же проблема. У меня есть datepicker в моем модальном режиме, и datepicker отлично работает при первом открытии моего экрана, но во второй раз ничего не происходит, когда вы нажимаете поле даты, и любые дальнейшие открытия модального выбора даты больше не работают. Я не смотрел слишком глубоко в этот код, но кажется, что код выбора даты должен искать, когда он имеет объект datepicker ui, а затем больше не работает.

Чтобы решить эту проблему, я запускаю это, когда я открываю модальное:

$("#modal").on('hidden.bs.modal', function() { 
    $('#ui-datepicker-div').remove(); 
}); 

Мой выбор даты в настоящее время работает отлично. Этот ui-datepicker-div - это тот, который автоматически создаёт datepicker при запуске $(".datepicker").datepicker();