多选的时间插件daterangepicker

最近在作一个后台管理的项目，须要一个多选的时间插件，在网上找了不少vue的多选时间插件，能够是不支持，不是vue版本过低 不支持较高的vue版本，就是只支持单选日期。

以后就干脆找了个jquery的时间插件,daterangepicker这个插件挺好用的，简单有容易上手，API文档也比较简单，http://www.daterangepicker.com/#examples。

首先，在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里写好的，因此就直接调用了。