javascript datepicker 不是 bootstrap 4.1 中的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/51269610/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
datepicker is not a function in bootstrap 4.1
提问by flash
I am working on a domainin 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 domainin order to make that work.
我想知道我需要按照域中脚本文件的顺序进行哪些更改才能使其工作。
I have a feeling the script files are placed in a wrong order in my domain.
我有一种感觉，脚本文件在我的域中的放置顺序错误。
回答by Alexander
The bootstrap-datepickeris not a part of the 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 文件放在您的服务器上并链接到它们。
回答by xTrimy
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:
查询：
Google CDN:
谷歌 CDN：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
or
或者
Microsoft CDN:
微软 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"/>
回答by user1842947
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/
网址：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>