bootstrap 没有显示它的日历

Question

我已经使用 bootstrap 制作了一个日历并 select 了一个范围内的日期，但是由于一些奇怪的原因，这个日历没有出现。

我已经写好了我的 html 和查询代码。但是我认为脚本是错误的！

Html ---

<div class="row">
    <!-- Hover Row Table -->
    <div class="col-lg-12">
        <div class="widget-container fluid-height clearfix">
            <div class="widget-content padded clearfix">
            <table class="table table-hover">
    <td>
        <div class="container">
            <div class="col-sm-6" style="height:75px;">
                <div class='col-md-5'>
                    <div class="form-group">
                        <div>Start</div>

                        <div class='input-group date' id='startDate'>
                            <input type='text' class="form-control" name="startDate" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>
                        </div>
                    </div>
                </div>
                <div class='col-md-5'>
                    <div class="form-group">
                        <div>End</div>

                        <div class='input-group date' id='endDate'>
                            <input type='text' class="form-control" name="org_endDate" />
                            <span class="add-on">
                                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                            </span>                                
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </td>

脚本--

 <script>
        jQuery(function () {
            jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
            jQuery('#endDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
            jQuery("#startDate").on("dp.change", function (e) {
                jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
            });
            jQuery("#endDate").on("dp.change", function (e) {
                jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
            });
        });
    </script>

输出---

它应该是这样的---

显示错误---

TypeError: jQuery(...).datetimepicker is not a function


jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});

我该如何解决这个错误，任何人都知道！非常感谢。

Answer 1

我找到了这个 jsfiddle 示例。

<div class="row">
  <div class="col-md-12">
     <h6>datetimepicker1</h6>

    <div class="form-group">
        <div class="input-group date" id="datetimepicker1">
            <input type="text" class="form-control" />  <span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span>
        </div>
    </div>
     <h6>datetimepicker2</h6>

    <input type="text" class="form-control" id="datetimepicker2" />
  </div>
</div>

$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker();

您还可以在 github 上阅读更多相关信息。

bootstrap 没有显示它的日历

bootstrap is not showing it's calendar

html

calendar

twitter-bootstrap