bootstrap⽇期范围选择插件daterangepicker详细使⽤⽅法插件
bootstrap-daterangepicker是个很⽅便的插件，但是对我这种菜鸟来说，⽂档不够详细，摆弄了好久才整好。记录下来供以后参考，也希望能帮到有需要的朋友。
⽬前版本是2.1.25，以下使⽤⽅法均相当于此版本。
1. 所需静态⽂件
jquery@1.11.3_2
bootstrap@3.3.4
momentjs:moment@2.10.3
daterangepicker.js
daterangepicker.css
我⼀开始⾃⼰⽤的是bootstrap 4，jquery也⽤的最新版本，出来很多错误，暂时先改到⽂档中要求的版本。
将这些⽂件引⼊到⽹页中。
2. 定制
在官⽅⽹站上可以根据⾃⼰的需要定制并预览选择器。下⾯是各种选项：
每种选项的变化都可以在下⾯的选择器中预览，点击弹出窗⼝就可看到效果：
同时⽣成了代码在这个框中，这些代码后⾯要⽤到：
3. html代码
html代码可以多种多样，我⽤⼀个最简单的结合了bootstrap样式的输⼊框：
<div class="col-sm-4 input-group" id="date-picker">
<span class="input-group-addon" id="basic-addon">⽇期范围</span>
<input type = "text" id="date-range" class="form-control">
<i id="calendar-icon" class="fa fa-calendar"></i>
</div>
4. 加⼊js代码
在body的最后，加⼊以下js代码：
<script type = "text/javascript">
$(document).ready(function () {
$('#date-range').daterangepicker({
"showDropdowns": true,
"showISOWeekNumbers": true,
"ranges": {
'今天': [moment(), moment()],
'昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'近⼀周': [moment().subtract(6, 'days'), moment().subtract(6, 'days')],
'近⼀个⽉': [moment().subtract(29, 'days'), moment()],
'本⽉': [moment().startOf('month'), moment().endOf('month')],
'上个⽉': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
"locale": {
"format": "YYYY/MM/DD",
"separator": " - ",
"applyLabel": "确定",
"cancelLabel": "取消",
"fromLabel": "从",
"toLabel": "到",
"customRangeLabel": "⾃定义",
"weekLabel": "周",
"daysOfWeek": [
"⽇",
"⼀",
"⼆",
"三",
"四",
"五",
"六"
]
,
"monthNames": [
"1⽉",
"2⽉",
"3⽉",
"4⽉",
"5⽉",
"6⽉",
"7⽉",
"8⽉",
"9⽉",
"10⽉",
"11⽉",
"12⽉"
],
"firstDay": 1
},
"alwaysShowCalendars": true,
"startDate": moment().subtract(6, 'days'),
"endDate": moment(),
"minDate": "2017年01⽉01⽇",
"linkedCalendars": false,
"maxDate": "2019年12⽉31⽇"
bootstrap 5}, function (start, end, label) {
console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");        });
});
</script>
.daterangepicker后⾯的内容就是前⾯第⼆步最后⾃定义选项⽣成的代码。其中"ranges"选项需要修改成上⾯代码中这种动态的⽇期，不要⽤⽹站中选项⽣成的固定⽇期。
其中"locale"字典中是内容。
5. 遇到的坑
1. 没有把ranges选项中的⽇期改成动态的，⽤的直接复制过来的⽇期，⼀直显⽰⽆效；
2. 设置maxDate和minDate时的默认格式为MM/DD/YYYY，前⾯locale⾥想设置成YYYY-MM-DD，结果
总是⽆效；可以设置成MM-DD-YYYY或者MM-
DD,YYYY，但就是不能设置成年份在最前⾯。后来将maxDate和minDate选项的数据也改成YYYY-MM-DD格式，才终于解决了问题。
3. ⽉份以后，⽉份选择框和年份选择框垂直⽅向不对齐，看着⾮常别扭。在font-family最后加⼊"宋体"，问题解决（我⽤的chorme，不知道其他浏览器能不能解决）。
6.最终效果
如果帮到你了，请帮忙点赞！：-）

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。