最近在做一个后台管理的项目，需要一个多选的时间插件，在网上找了很多vue的多选时间插件，可以是不支持，不是vue版本太低 不支持较高的vue版本，就是只支持单选日期。
之后就干脆找了个jquery的时间插件,daterangepicker这个插件挺好用的，简单有容易上手，API文档也比较简单，http://www.daterangepicker.com/#examples。
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco; color: #737373 }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Monaco; color: #737373; min-height: 15.0px }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Monaco; color: #737373 }
span.s1 { }
span.s2 { background-color: #fee9cc }
首先，在vue的文件入口html文件里引用
``
<script type="text/javascript" src="public/js/jquery.min.js"></script>
<script type="text/javascript" src="public/js/moment.min.js"></script>
<script type="text/javascript" src="public/js/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="public/css/daterangepicker.css" />
在.vue文件里加个input
<input type="text" name="daterange" value="" />
然后，在mounted，直接插入
$(‘input[name="daterange"]‘).daterangepicker();
时间多选就可以实现了。
当然肯定也会需要异步加载数据与更新的，所以需要回调函数。
官网里API文档写的很清楚了，以下官网的回调方法。
`$(‘input[name="daterange"]‘).daterangepicker(
{
locale: {
format: ‘YYYY-MM-DD‘
},
startDate: ‘2013-01-01‘,
endDate: ‘2013-12-31‘
}, function(start, end, label) {
alert("A new date range was chosen: " + start.format(‘YYYY-MM-DD‘) + ‘ to ‘ + end.format(‘YYYY-MM-DD‘));
});`
当然，vue是支持es6的所以，以下是我的方法
`$(‘input[name="daterange"]‘).daterangepicker({
locale: {
format: ‘YYYY/MM/DD‘
},
startDate: this.begin,
endDate: this.end,
}, (start, end, label) => {
this.begin = start.format(‘YYYYMMDD‘)
this.end = end.format(‘YYYYMMDD‘)
this.userData()
this.getOrderTotal()
this.getUserChannelCount()
this.getOrderChannelCount()
})
`
好了，一个多选时间就已经完成了，声明以下，回调里那些方法，都我在methods里写好的，所以就直接调用了。