Question

我想将bootstrap datepicker集成到bootstrap模式体，这是我的代码，但它没有用：

<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的模态，有什么解决方案吗？

Answer 1

更新

您需要一个类似this

的嵌入式日期选择器

您需要bootstrap-datepicker.js，而且datepicker也适用于input元素。

此代码段将确保datepicker可以在HTML页面的任何位置使用

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

这是demo

Answer 2

<html>
<head>

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

  <link href="css/bootstrap.css" rel="stylesheet" /> 

  <link href="css/bootstrap-responsive.css" rel="stylesheet" />

    <link href="css/bootstrap-modal.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css"  href="css/jquery-ui2.css">


    <link rel="stylesheet" type="text/css" href="css/calendar.css">

    <link rel="stylesheet" href="css/tabbedwindow.css" type="text/css" />
        <link rel="stylesheet" href="css/tabdrop.css">
    <link rel="stylesheet" href="css/noselection.css">  

        <link rel="stylesheet" href="css/bootstrap-datepicker.min.css"> 

   <script src="js/jquery-2.1.3.min.js"></script>
   <script src="js/jquery-ui-1.9.2.custom.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap-modalmanager.js"></script>
    <script src="js/bootstrap-modal.js"></script>
 <script src="js/bootstrap-tabdrop.js"></script>

 <script src="js/jquery.doubletap.js"></script>
<script src="js/bootstrap-datepicker.js"></script>


<style>
.datepicker{z-index:1151 !important;}
</style>


<script type="text/javascript">

$(function () {
$('.datepicker').datepicker('show');
$(".datepicker").on("changeDate", function(event) {
  // $('.datepicker').datepicker('show');
});

$('.datepicker').on("hide", function(event) {



});

$('div.datepicker.dropdown-menu').css('display:block !important;');
});

</script>

</head>

<body >





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

<div id="datepicker" data-date="12/03/2012"></div>
        <input type="hidden" id="my_hidden_input" />

 </div>

</div>

<script>

$('#calendarPopup').modal({
        backdrop: 'static'
    });
    $("#calendarPopup .modal-body").html();
    $('#datepicker').datepicker();
    $("#datepicker").on("changeDate", function (event) {
        $("#my_hidden_input").val(
        $("#datepicker").datepicker('getFormattedDate'))
    });



</script>

<script type="text/javascript">

function closeBox() {

tabbedWindowHTML = '<ul id="tabs_list" class="nav nav-tabs" style="flex: 0 0 auto">';

}

   Date.prototype.getWeek = function() {
var onejan = new Date(this.getFullYear(),0,1);
return Math.ceil((((this - onejan) / 86400000) + onejan.getDay()+1)/7);
}

</script>


</body>
</html>

如何在Bootstrap Modal中放入Bootstrap内联日期选择器？

2 个答案:

更新