javascript - datepicker 不是 bootstrap 4.1 中的函数
问题描述
我正在研究一个域,我希望在单击搜索输入框时使日历可见。
我用来放置输入框的 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>
问题陈述:
我想知道我需要按照我的域中的脚本文件的顺序进行哪些更改才能使其正常工作。
我感觉脚本文件在我的域中以错误的顺序放置。
解决方案
bootstrap-datepicker不是 Bootstrap 的一部分。所以,你必须在使用它之前包含 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 文件放在您的服务器上并链接到它们。
推荐阅读
- java - System.out.println() 更改单线程程序中变量的值
- laravel - vuejs 在数据结果中循环而不是我有多少字段
- python - Python调用内部函数
- java - 网络:如何创建一个允许多个用户相互交谈的服务器
- r - 为什么在 R 中制作线性多项式模型时需要 I()“AsIs”?
- java - Java:PrintWriter 未写入文件
- c# - 如何在 Hostgator 上托管 ASP.NET MVC 网站
- python - 类型错误:strptime() 参数 1 必须是 str,而不是列表
- excel - 在 Word 宏中返回 Excel 行
- javascript - 就时间效率而言,在 store(model) 和 class 中存储状态有什么区别?