如何将 Bootstrap 内联日期选择器放入 bootstrap 模态？答案

【问题标题】：How can I put Bootstrap inline datepicker in bootstrap Modal?如何将 Bootstrap 内联日期选择器放入 bootstrap 模态？
【发布时间】：2015-05-16 03:18:40
【问题描述】：

我想将 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>

它显示没有日期选择器的模态，有什么解决方案吗？

【问题讨论】：

这个有帮助吗stackoverflow.com/questions/12978254/…
它对我不起作用...
你能在jsfiddle.net上创建一个样本吗？
因为不使用输入框，所以打开模态窗口后直接显示日期选择器。
这里是 jsfiddle jsfiddle.net/wiss90/yxxysyhh

标签： jquery twitter-bootstrap datepicker bootstrap-modal

【解决方案1】：

更新

您需要一个嵌入式日期选择器，例如 this

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

这段代码 sn-p 将确保 datepicker 可以在 HTML 页面中的任何位置工作

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

这是demo

【讨论】：

我之前让它像以前那样工作，但正如我所说，我想在不输入任何文本的情况下将日期选择器直接显示到模态。
您可以隐藏输入文本，因为日期选择器不能应用于除输入之外的任何内容。像这样jsfiddle.net/2d5L2xcc/6
但是模态不会动态支持日期选择器的问题。
我明白你在说什么。你需要一个像这样的嵌入日期选择器jsfiddle.net/2d5L2xcc/8
我得到了这个“错误无法读取未定义的属性“拆分”。我将发布我的最终代码以查看其中的错误并感谢您。

【解决方案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>

【讨论】：

首先将所有脚本放在一个