datepicker 不是 bootstrap 4.1 中的函数
Posted
技术标签:
【中文标题】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输入日历图标不可点击
@ng-bootstrap NgbDatepicker 遇到“无法绑定到 'ngModel',因为它不是 'ngb-datepicker' 的已知属性” [重复]