多選的時間插件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裏寫好的，因此就直接調用了。