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>
最后,如果我的笔记对您有帮助,请给我一个赞~ 谢谢!