Question

我已经使用bootstrap制作日历并从中选择了一个范围日期，但问题是由于一些奇怪的原因，日历不会到来。

我已经编写了我的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没有显示它的日历

1 个答案: