datepicker 不是 bootstrap 4.1 中的函数

2024-04-22

我正在研究一个domain http://ferhan.ferohost.com/我想在其中单击搜索输入框时使日历可见。

我用来放置输入框的 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 http://ferhan.ferohost.com/为了使这项工作发挥作用。

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


The 引导日期选择器 http://bootstrap-datepicker.readthedocs.io/en/latest/不是 Bootstrap 的一部分。因此,在使用它之前,您必须包含日期选择器插件代码。

$("#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 文件放置在您的服务器上并链接到它们。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

datepicker 不是 bootstrap 4.1 中的函数 的相关文章

随机推荐