将 jquery datetimepicker 渲染到模式中时出现问题

Question

我正在尝试将 jquery 日期时间选择器显示为 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

不清楚你的问题是什么。模式是否显示？或者只是日期时间选择器不起作用？

尝试在 setTimeout 调用之前添加这个

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

此外，如果您的#availability_calender div 已经在 dom

中，则不需要调用 setTimeout

Answer 2

You must initialize event after $('#availability_modal').modal('show'); as #availability_calender is not present in the DOM when you are initializing the 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>

Fiddle here

Answer 3

我不确定您为什么要 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>

将 jquery datetimepicker 渲染到模式中时出现问题

issue in rendering jquery datetimepicker into a modal

javascript

jquery

datetimepicker

twitter-bootstrap