Question

我试图将jquery datetimepicker显示为bootstrap模式..

HTML：

<div class="modal fade" id="availability_modal" role="dialog">
<div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                &times;
            </button>
            <h4 class="modal-title">View availability of %SUPP_NAME%</h4>
        </div>
        <div class="modal-body">
            <div id="availability_calender"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
                Close
            </button>
        </div>
    </div>
</div>

我使用的jquery是......

$(document).on("click","#open_availability",function(e){
    setTimeout(function(){
        jQuery('#availability_calender').datetimepicker({
         formatDate: "d.m.Y", 
         inline:true,
         timepicker:false,
         highlightedDates: [
            "29.02.2016,Meeting with Pete", 
            "24.02.2016,Christmas Eve,xdsoft_highlighted_mint", 
            "25.02.2016,Christmas Day,xdsoft_highlighted_mint", 
            "26.02.2016,Thanksgiving"
         ],
         highlightedPeriods: [
            "27.04.2015,08.05.2015,Business trip", 
            "11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint", 
            "21.12.2015,01.01.2016,Christmas holiday 2015"
         ]
        });
    },1000);

});

当我没有渲染成模态时，它工作正常... 任何帮助表示赞赏

Answer 1

我不确定您为什么要div元素来初始化datetimepicker，但我建议您将该元素更改为具有相同ID的input形式。

有一个回调，当浏览器中的模态显示为shown.bs.modal时，您可以初始化其中的datetimepicker：

jQuery('#availability_modal').on('shown.bs.modal', function() {
  jQuery('#availability_calender').datetimepicker({
    formatDate: "d.m.Y",
    inline: true,
    timepicker: false,
    highlightedDates: [
      "29.02.2016,Meeting with Pete",
      "24.02.2016,Christmas Eve,xdsoft_highlighted_mint",
      "25.02.2016,Christmas Day,xdsoft_highlighted_mint",
      "26.02.2016,Thanksgiving"
    ],
    highlightedPeriods: [
      "27.04.2015,08.05.2015,Business trip",
      "11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint",
      "21.12.2015,01.01.2016,Christmas holiday 2015"
    ]
  });
})

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.css">
<link rel="stylesheet" type="text/css" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script>
  Date.parseDate = function(input, format) {
    return moment(input, format).toDate();
  };
  Date.prototype.dateFormat = function(format) {
    return moment(this).format(format);
  };
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.1/jquery.datetimepicker.min.js"></script>



<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#availability_modal">
  Launch demo modal
</button>

<div class="modal fade" id="availability_modal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          &times;
        </button>
        <h4 class="modal-title">View availability of %SUPP_NAME%</h4>
      </div>
      <div class="modal-body">
        <div id="availability_calender"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>

Answer 2

不清楚你的问题是什么。模态显示？或者它只是没有工作的datetimepicker？

尝试在setTimeout Call

之前添加此项

$('#availability_modal').modal('show');

如果#availability_calender div已经在dom中，你也不需要setTimeout调用

Answer 3

初始化$('#availability_modal').modal('show');
时，您必须在#availability_calender之后初始化事件，因为DOM中datetimepicker不存在#availability_calender

修改： input应该是div元素，而不是$('#btn').on('click', function() { $('#availability_modal').modal('show'); jQuery('#availability_calender').datetimepicker({ formatDate: "d.m.Y", inline: true, timepicker: false, highlightedDates: [ "29.02.2016,Meeting with Pete", "24.02.2016,Christmas Eve,xdsoft_highlighted_mint", "25.02.2016,Christmas Day,xdsoft_highlighted_mint", "26.02.2016,Thanksgiving" ], highlightedPeriods: [ "27.04.2015,08.05.2015,Business trip", "11.07.2015,31.08.2015,Summer holiday 2015,xdsoft_highlighted_mint", "21.12.2015,01.01.2016,Christmas holiday 2015" ] }); 0 })元素。

试试这个：

<div class="modal fade" id="availability_modal" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          &times;
        </button>
        <h4 class="modal-title">View availability of %SUPP_NAME%</h4>
      </div>
      <div class="modal-body">
        <input id="availability_calender">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

<button id='btn'>Open</button>

CONNECT karan/shah@PDB5

Fiddle here

将jquery datetimepicker渲染到模态中的问题

3 个答案: