Как мога да поставя Bootstrap inline datepicker в bootstrap Modal?

Искам да интегрирам bootstrap datepicker към bootstrap modal body, това е моят код, но не работи:

<script type="text/javascript">

$(function () {
$('.datepicker').datepicker('show');

});

</script>

</head>

<body >

<div id="calendarPopup" class="modal hide fade" tabindex="-1" data-focus-on="input:first">
  <div class="modal-header">
    <button type="button"  class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="stack-header"></h3>
  </div>
  <div class="modal-body" >

 <div class="datepicker" data-date="" style="display:block!important;"></div>


 </div>

</div>

<script>

$('#calendarPopup').modal({backdrop: 'static'});
 $('#calendarPopup').modal('show');

</script>

</body>

Показва модала без инструмента за избор на дата, има ли някакво решение?


datepicker jquery twitter-bootstrap bootstrap-modal
person Wissem Achour    schedule 13.03.2015    source източник
comment
това помага ли stackoverflow.com/questions/12978254 /   -  person Dhiraj    schedule 13.03.2015
comment
При мен не проработи...   -  person Wissem Achour    schedule 13.03.2015
comment
можете ли да създадете извадка на jsfiddle.net?   -  person Dhiraj    schedule 13.03.2015
comment
Тъй като не използвам поле за въвеждане, показвам инструмента за избор на дата директно след отваряне на модалния прозорец.   -  person Wissem Achour    schedule 13.03.2015
comment
тук jsfiddle jsfiddle.net/wiss90/yxxysyhh   -  person Wissem Achour    schedule 13.03.2015
comment
не сте включили datepicker.js в него   -  person Dhiraj    schedule 13.03.2015

Отговори (2)


arrow_upward
0
arrow_downward

Актуализация

Имате нужда от вграден инструмент за избор на дати като този

Имате нужда от bootstrap-datepicker.js и също така инструментът за избор на дата работи върху input елемента.

Този кодов фрагмент ще гарантира, че инструментът за избор на дата ще работи навсякъде в HTML страницата

$('body')
    .on('click', '.datepicker', function () {
    $(this).datepicker();
})
    .on('focus', '.datepicker', function () {
    $(this).datepicker();
});

Ето демо

person Dhiraj    schedule 13.03.2015
comment
Накарах го да работи така преди, но както казах, искам да покажа инструмента за избор на дата директно в модала без въвеждане на текст. - person Wissem Achour; 13.03.2015
comment
можете да скриете въведения текст, защото инструментът за избор на дата не може да бъде приложен към нищо друго освен въвеждане. Нещо като това jsfiddle.net/2d5L2xcc/6 - person Dhiraj; 13.03.2015
comment
но проблемът е, че модалът няма да работи динамично с инструмента за избор на дата. - person Wissem Achour; 13.03.2015
comment
Разбирам какво казваш. Имате нужда от инструмент за вграждане на дати като този jsfiddle.net/2d5L2xcc/8 - person Dhiraj; 13.03.2015
comment
получих тази „грешка Не мога да прочета свойство „split“ на undefined“. Ще публикувам окончателния си код, за да видя грешката в него и ви благодаря. - person Wissem Achour; 13.03.2015

arrow_upward

arrow_downward

person    schedule
comment
първо имайте всички скриптове в един единствен таг ‹script›. И изглежда, че работи добре. jsfiddle.net/2d5L2xcc/9 Моля, покажете грешката, която виждате - person Dhiraj; 13.03.2015