datepicker 不是 bootstrap 4.1 中的函数

Posted 2023-03-05

技术标签:

【中文标题】datepicker 不是 bootstrap 4.1 中的函数【英文标题】：datepicker is not a function in bootstrap 4.1 【发布时间】：2018-12-18 13:23:39 【问题描述】：

我正在处理domain，我希望在单击搜索输入框时使日历可见。

我用来放置输入框的 html 代码是：

<div class="dates">
   <div class="start_date">
     <input class="form-control start_date mb-4" type="text" placeholder="start date" id="startdate_datepicker">
     <span class="fa fa-calendar start_date_calendar" aria-hidden="true "></span>
  </div>
  <div class="end_date">
    <input class="form-control  end_date mb-4" type="text" placeholder="end date" id="enddate_datepicker">
     <span class="fa fa-calendar end_date_calendar" aria-hidden="true "></span>
     </div>
</div>

我使用的脚本文件是：

<script>
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker" ).datepicker();
</script>

问题陈述：

我想知道我需要按照我的domain 中的脚本文件的顺序进行哪些更改才能使其正常工作。

我感觉脚本文件在我的域中的放置顺序错误。

【问题讨论】：

您之前是否提到过您的问题。 ***.com/questions/51256634/… 请参考我的答案并包含这些文件。 How to make the calendar popup on click of a calendar icon ?的可能重复 @VigneshRaja 不，这是一个不同的问题。我正在尝试通过导入引导文件来了解如何使其工作。 @VigneshRaja 我也会使用你的答案，看看我如何以不同的方式使用日期选择器。 【参考方案1】：

bootstrap-datepicker 不是引导程序的一部分。所以，你必须在使用前包含 datepicker 插件代码。

$("#startdate_datepicker").datepicker();
$("#enddate_datepicker").datepicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />

<!-- Include Bootstrap Datepicker -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.min.js"></script>

<div class="dates">
  <div class="start_date input-group mb-4">
    <input class="form-control start_date" type="text" placeholder="start date" id="startdate_datepicker">
    <div class="input-group-append">
      <span class="fa fa-calendar input-group-text start_date_calendar" aria-hidden="true "></span>
    </div>

  </div>
  <div class="end_date input-group mb-4">
    <input class="form-control end_date" type="text" placeholder="end date" id="enddate_datepicker">
    <div class="input-group-append">
      <span class="fa fa-calendar input-group-text end_date_calendar" aria-hidden="true "></span>
    </div>
  </div>
</div>

如果无法使用 CDN，您可以将插件的 CSS 和 javascript 文件放在您的服务器上并链接到它们。

【讨论】：

好的，现在可以了，但我有一些问题，请继续关注。 @user5447339，因为该 CDN 中没有日期选择器代码。 [jQuery.fn.datepicker()] 函数在bootstrap-datepicker.js 文件中定义。 @user5447339，代码正确性的最佳指标是正确工作的页面。您的代码有效，这是主要的；） @user5447339，如果你想考虑<link>s和<script>s订购的问题，我建议你阅读Deep dive into the murky waters of script loading的文章。今天我们的网络出现了互联网访问问题。因此，我只能通过手机查看您的页面，而且看起来还不错。所以，我建议你创建一个关于日期对齐的新帖子。我希望有人会帮助你。【参考方案2】：

我认为您忘记将 jquery 和 bootstrap-datepicker 添加到您的域将此代码放在<head></head>之间

jQuery：

谷歌 CDN：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

或

微软 CDN：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

还要添加：

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

【讨论】：

【参考方案3】：

我也有同样的问题。首先是 datepicker 和 datetimepicker 不匹配。

接下来我遇到了 datetimepicker 的新问题，最后发现 bootstrap 4.1 有一个 bootstrap-datepicker 的继承者：Tempus Dominus。

网址：https://tempusdominus.github.io/bootstrap-4/

来自“安装”部分：

<head>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
</head>

“使用”部分的下一个：

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker1" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"/>
                    <div class="input-group-append" data-target="#datetimepicker1" 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();
            );
        </script>
    </div>
</div>

【讨论】：

以上是关于datepicker 不是 bootstrap 4.1 中的函数的主要内容，如果未能解决你的问题，请参考以下文章

$(...).datepicker 不是一个函数 - JQuery - Bootstrap

检查 Bootstrap Datepicker 脚本是不是已加载

Bootstrap 4 和 datepicker 下拉位置

Bootstrap 4 Datepicker块日期范围

Bootstrap 4 datepicker输入日历图标不可点击

@ng-bootstrap NgbDatepicker 遇到“无法绑定到 'ngModel'，因为它不是 'ngb-datepicker' 的已知属性” [重复]