多选的时间插件daterangepicker

Posted 2020-09-23 雅涵

最近在做一个后台管理的项目，需要一个多选的时间插件，在网上找了很多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里写好的，所以就直接调用了。