Question

我正在努力将DatePicker添加到当前网站。我一直在遵循以下指示：https://tempusdominus.github.io/bootstrap-4/

在我的项目标题中，我包括：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />

这就是我所说的日期选择器的方式：

   <div class="container">
          <div class="row">
              <div class="col-sm-6">
                  <div class="form-group">
                      <div class="input-group date" id="datetimepicker" data-target-input="nearest">
                          <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker"/>
                          <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
                              <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                          </div>
                      </div>
                  </div>
              </div>
              <script type="text/javascript">
                  $(function () {
                      $('#datetimepicker1').datetimepicker();
                      $('#datetimepicker').on("change.datetimepicker", function (e) {
                         console.log(e.date);
                      });
                  });
              </script>
          </div>
        </div>

但是我收到一个错误：未捕获的TypeError：$（...）。datetimepicker不是一个函数

关于如何解决此问题的任何想法？

Answer 1

通过将ID选择器从＃datetimepicker1更改为#datetimepicker，我可以使用代码。所以，

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

Answer 2

首先，您需要在代码中将datetimepicker1更改为datetimepicker，这很好。.

您可以使用datetimepicker和data-target="#datetimepicker"将data-toggle="datetimepicker"绑定到图标和输入上，无论将它们添加到图标或输入上是什么，您的日期标记都可以在其上工作

$(function () {
    $('#datetimepicker').datetimepicker();
    $('#datetimepicker1').datetimepicker();
});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <label>Target input</label>
            <input type="text" class="form-control datetimepicker-input" id="datetimepicker" data-toggle="datetimepicker" data-target="#datetimepicker"/>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                <label>Target Input and Icon</label>
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" data-toggle="datetimepicker"/>
                    <div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
                        <div class="input-group-text">Icon</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

未捕获的TypeError：$（...）。datetimepicker不是函数错误

2 个答案: