JQuery 如何正确显示日期选择器？答案

【问题标题】：JQuery How can display datepicker properly?JQuery 如何正确显示日期选择器？
【发布时间】：2022-01-06 00:38:45
【问题描述】：

大家，你知道这个 datepick 有什么问题吗？我希望看到的是日历，而不是时间选择器。

我使用来自 youtube 教程的以下链接和脚本的引导示例文件

<section class="row gy-3">

  <div class="form-group">
      <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
              <i class="bi-alarm"></i>
          </span>
      </div>
  </div>

</section>
<script type="text/javascript">
  $(function() {
      $('#datetimepicker1').datetimepicker();
  });
</script>

我使用来自 youtube 教程的以下链接和脚本的引导示例文件

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <!-- Bootstrap core CSS -->
    <link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>
    <script src="form-validation.js"></script>

【问题讨论】：

标签： javascript html jquery css

【解决方案1】：

在这里，您添加了 datetimepicker css 和 js，以便时间调用日期和时间等函数，因此请使用下面的 css 和 js 导入并正常工作

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
  $(function() {
      $('#datetimepicker1').datetimepicker();
  });
</script>

替换为以下网址

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

<script type="text/javascript">
        $(function() {
            $('#datetimepicker1').datepicker();
        });
    </script>

【讨论】：