bootstrap-datepicker日历插件

骑猪看日落 2023-06-16 15:53 3阅读 0赞

bootstrap-datepicker为日历插件，需要加载css与js  
先把网址放上去  
找到一个英文版的：[https://bootstrap-datepicker.readthedocs.io/en/latest/][https_bootstrap-datepicker.readthedocs.io_en_latest]  
ps：学渣看不懂英语，惭愧。  
来一个别人写的博客：[https://www.jianshu.com/p/48b2343ded54][https_www.jianshu.com_p_48b2343ded54]  
在来一个：[https://www.cnblogs.com/wuhuacong/p/9829673.html][https_www.cnblogs.com_wuhuacong_p_9829673.html]  
[https://blog.csdn.net/liuying1802028915/article/details/84402057][https_blog.csdn.net_liuying1802028915_article_details_84402057]  
[https://www.daterangepicker.cn/][https_www.daterangepicker.cn]  
这样应该够了，其他有用到的在发或者找度娘。

那么下面开始我把我用到的代码放上去  
**日期选择器所需要的css和js**

<link rel="stylesheet" href="../../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
    
    <script src="../../bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.js"></script>
    <script src="../../bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>

如果不加载bootstrap-datepicker.zh-CN.min.js，就会显示英文日历插件。  
![在这里插入图片描述][20191127091633147.png]  
加载后  
![在这里插入图片描述][20191127091729663.png]

**1、单个日期选择器**  
单个日期选择器比较简单，我的是把js给封装了，要用的时候直接调用就可以。

<div class=" row" style="margin: 0">
    	<div class="col-xs-6">
    		<input id="WHC_PayDate" name="start" type="text" placeholder="选择开始日期" data-date-format="yyyy-mm-dd" class=" form-control" />
    	</div>
    </div>
    <script> oneDatepicker('#WHC_PayDate'); //单个日历选择 function oneDatepicker(lable) { $(lable).datepicker({ language: 'zh-CN', //语言 autoclose: true,//选择后自动关闭 clearBtn: true//清除按钮 }); } </script>

**2、2个日期选择器，并且有关联（开始日期选择后，结束日期不能超过开始日期）**  
html

<div class=" row" style="margin: 0">
    	<div class="col-xs-6">
    		<input id="WHC_PayDate" name="start" type="text" placeholder="选择开始日期" data-date-format="yyyy-mm-dd" class=" form-control"/>
    	</div>
    	<div class="col-xs-6">
    		<input id="WHC_PayDate2" name="end" type="text" placeholder="选择结束日期" data-date-format="yyyy-mm-dd" class=" form-control" />
     	</div>
    </div>
    <script> //日期选择器 选择开始日期 $('#WHC_PayDate').datepicker({ language: 'zh-CN', //语言 // todayBtn : "linked",//显示今天按钮 autoclose : true,//选择后自动关闭 todayHighlight : true,//今天日期高亮 clearBtn: true//清除按钮 // endDate : new Date() //设置结束时间 }).on('changeDate',function(e){ var startTime = e.date; $('#WHC_PayDate2').datepicker('setStartDate',startTime); }); //日期选择器 选择结束日期 $('#WHC_PayDate2').datepicker({ language: 'zh-CN', //语言 // todayBtn : "linked",//显示今天按钮 autoclose : true,//选择后自动关闭 clearBtn: true,//清除按钮 todayHighlight : true//今天日期高亮 // endDate : new Date() //设置结束时间 }).on('changeDate',function(e){ var endTime = e.date; $('#WHC_PayDate').datepicker('setEndDate',endTime); }); </script>

两个日期选择有关联，结束日期不能在开始日期之前，选择了开始日期，那么结束日期就不能选择开始日期之前的日期。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]  
**3、日期区间选择**  
首先先看下做出来的效果，下拉是选择时间，有颜色的区间就是选择的日期区间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]

这边引入的css和js不同于上面2个的  
html

<link rel="stylesheet" href="../../../bower_components/bootstrap-daterangepicker/daterangepicker.css">
    
    <script src="../../../bower_components/moment/min/moment.min.js"></script>
    <script src="../../../bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
    <div class="row">
    	<div class="form-group col-xs-6 col-sm-3 col-md-3 col-lg-2">
    		<input type="text" class="public_input" id="apply" placeholder="申请时间">
    	</div>
    	<div class="form-group col-xs-6 col-sm-3 col-md-3 col-lg-2">
    		<input type="text" class="public_input" id="audit" placeholder="审核时间">
        </div>
    </div>
    <script> $(document).ready(function () { //基本初始化 orderSection('#apply') orderSectionLeft('#audit') }) //靠左的日期区间选择，带时间,以一分钟为区间 function orderSectionLeft(label) { //订单时间范围执行日期区间选择方法 $(label).daterangepicker({ autoUpdateInput:false, //指示日期范围选择器是否应<input> 在初始化时以及所选日期更改时自动更新其附加元素的值 timePicker: true, timePickerIncrement: 1,//设置分钟区间 opens: 'left',//选择器靠左显示 locale: { applyLabel:'确定', //确定按钮内容改变 cancelLabel:'清空', //取消按钮内容改变 format: 'MM/DD/YYYY hh:mm A', separator: " - ", daysOfWeek: ["日","一","二","三","四","五","六"],//代替英文的周 monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"] } }).on('apply.daterangepicker', function(ev, picker) { //点击确定 $(label).val(picker.startDate.format('YYYY-MM-DD hh:mm A')+" 至 "+picker.endDate.format('YYYY-MM-DD hh:mm A')); }).on('cancel.daterangepicker',function (ev,picker) { //点击取消 $(label).val(""); }); } //靠右的日期区间选择，带时间,以一分钟为区间 function orderSection(label) { //订单时间范围执行日期区间选择方法 $(label).daterangepicker({ autoUpdateInput:false, //指示日期范围选择器是否应<input> 在初始化时以及所选日期更改时自动更新其附加元素的值 timePicker: true, timePickerIncrement: 1,//设置分钟区间 locale: { applyLabel:'确定', //确定按钮内容改变 cancelLabel:'清空', //取消按钮内容改变 format: 'MM/DD/YYYY hh:mm A', separator: " - ", daysOfWeek: ["日","一","二","三","四","五","六"],//代替英文的周 monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"] } }).on('apply.daterangepicker', function(ev, picker) { //点击确定 $(label).val(picker.startDate.format('YYYY-MM-DD hh:mm A')+" 至 "+picker.endDate.format('YYYY-MM-DD hh:mm A')); }).on('cancel.daterangepicker',function (ev,picker) { //点击取消 $(label).val(""); }); } </script>

在这里解释下opens这个属性说明  
opens: (‘left’/‘right’/‘center’) 选择器是否显示为左侧，右侧，或者它所附加的HTML元素下方居中。  
![在这里插入图片描述][20191203103118325.png]  
![在这里插入图片描述][20191203103424879.png]  
根据自己的项目来使用这个属性。

然后有个问题，在谷歌浏览器下，会出现之前选择的历史记录，火狐的不会有这样的情况。  
![在这里插入图片描述][20191127092503500.png]  
随后查了下百度，发现一个[老兄的博客][Link 1]解决了这个问题，只要在input上添加autocomplete="off"就行了

**最后，如果我的笔记对您有帮助，请给我一个赞~ 谢谢！**

[https_bootstrap-datepicker.readthedocs.io_en_latest]: https://bootstrap-datepicker.readthedocs.io/en/latest/
[https_www.jianshu.com_p_48b2343ded54]: https://www.jianshu.com/p/48b2343ded54
[https_www.cnblogs.com_wuhuacong_p_9829673.html]: https://www.cnblogs.com/wuhuacong/p/9829673.html
[https_blog.csdn.net_liuying1802028915_article_details_84402057]: https://blog.csdn.net/liuying1802028915/article/details/84402057
[https_www.daterangepicker.cn]: https://www.daterangepicker.cn/
[20191127091633147.png]: https://img-blog.csdnimg.cn/20191127091633147.png
[20191127091729663.png]: https://img-blog.csdnimg.cn/20191127091729663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191127092326633.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191203101751377.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNzA3NTU1,size_16,color_FFFFFF,t_70
[20191203103118325.png]: https://img-blog.csdnimg.cn/20191203103118325.png
[20191203103424879.png]: https://img-blog.csdnimg.cn/20191203103424879.png
[20191127092503500.png]: https://img-blog.csdnimg.cn/20191127092503500.png
[Link 1]: https://blog.csdn.net/qq_21304945/article/details/94022555