datepicker不是bootstrap 4.1中的函数
[英]datepicker is not a function in bootstrap 4.1
问题描述
I am working on a domain in which I want to make the calendar visible on click of a search input box. 
我正在使用一个域 ，希望在该域上单击搜索输入框即可显示日历。
The HTML code which I have used in order to place a input boxes are: 我用来放置输入框的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>
The script files which I have used is: 我使用的脚本文件是：
<script>
$("#startdate_datepicker").datepicker();
$("#enddate_datepicker" ).datepicker();
</script>
Problem Statement: 问题陈述：
I am wondering what changes I need to make in the order of script files from my domain in order to make that work. 我想知道我需要按照域中脚本文件的顺序进行哪些更改才能使其正常工作。
I have a feeling the script files are placed in a wrong order in my domain. 我感到脚本文件在我的域中的放置顺序错误。
3 个解决方案
解决方案1
2 已采纳 2018-07-10 16:08:28
The bootstrap-datepicker is not a part of the Bootstrap. bootstrap-datepicker不是Bootstrap的一部分。 So,you have to include datepicker plugin code, before use it. 因此，在使用它之前，您必须包括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>
If it's not possible to use CDN, you could place the CSS and JavaScript files of the plugin on your server and link to them. 如果无法使用CDN，则可以将插件的CSS和JavaScript文件放在服务器上并链接到它们。
解决方案2
1 2018-07-10 16:11:33
I think you forgot to add jquery and bootstrap-datepicker to your domain put this codes between <head></head> 我认为您忘记将jquery和bootstrap-datepicker添加到您的域中，将此代码放在<head></head>
Jquery : jQuery的 ：
Google CDN: Google CDN：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
or 要么
Microsoft CDN: Microsoft CDN：
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
Also add this: 还要添加以下内容：
<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
-2 2019-02-20 10:58:59
I've got the same issue. 我有同样的问题。 First it was a mismatch beetween datepicker and datetimepicker. 首先，日期选择器和日期时间选择器之间不匹配。
Next I've got a new issue with the datetimepicker and found finally that for bootstrap 4.1 there is a sucessor to bootstrap-datepicker : Tempus Dominus . 接下来，我遇到了有关datetimepicker的新问题，最后发现，对于bootstrap 4.1，有一个bootstrap-datepicker的后继者： Tempus Dominus 。
The URL web site : https://tempusdominus.github.io/bootstrap-4/ URL网站： https : //tempusdominus.github.io/bootstrap-4/
From the "Installing" section : 在“安装”部分：
<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>
Next from the "Usage" section : 接下来是“用法”部分：
<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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.