bootstrap-datepicker日历插件

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

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

<!--日历css-->
<link rel="stylesheet" href="../../bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!--日历插件js-->
<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，就会显示英文日历插件。

加载后

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>

两个日期选择有关联，结束日期不能在开始日期之前，选择了开始日期，那么结束日期就不能选择开始日期之前的日期。

3、日期区间选择
首先先看下做出来的效果，下拉是选择时间，有颜色的区间就是选择的日期区间

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

<!--bootstrap日历css-->
<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元素下方居中。


根据自己的项目来使用这个属性。

然后有个问题，在谷歌浏览器下，会出现之前选择的历史记录，火狐的不会有这样的情况。

随后查了下百度，发现一个老兄的博客解决了这个问题，只要在input上添加autocomplete="off"就行了

<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 " autocomplete="off"/>
	</div>
	<div class="col-xs-6">
		<input id="WHC_PayDate2" name="end" type="text" placeholder="选择结束日期" data-date-format="yyyy-mm-dd" class=" form-control " autocomplete="off"/>
	</div>
</div>

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