daterangepicker与vue集成，vue无法获得日期控件时间的修改解决方法

在后端管理项目中使用vue来进行前端项目的开发，但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的。

因此，在实践中会出现在日期控件中点击修改了日期，而无法通过vue来获得对应的值。

下面来说一下其中一种解决方案：主动触发Event事件。以下为相关内容的部分代码。

首先引入日期控件daterangepicker相关依赖的js和css。

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

当然，上面还需要引入jQuery相关的框架。

在页面的指定位置添加日期控件的input。

<input id="openDate" type="text" name="openDate" class="form-control"
                           autocomplete="off" placeholder="选择日期"
                           v-model="openDate"/>

这里痛v-model与vue中的openDate想绑定，但在后面js中不做特殊处理，是无法通过vue拿到该字段的值的。

js中初始化日期控件及触发DOM对象上的原生input事件。

// 日期控件
$(function () {
    $('#openDate').daterangepicker({
        showWeekNumbers: false,
        timePicker: false,
        timePickerIncrement: 1,
        singleDatePicker: true,
        startDate: moment(),
        maxDate: moment(),
        locale: {
            // cancelLabel: '清空'
            format: "YYYY-MM-DD", //设置显示格式
            applyLabel: '确定', //确定按钮文本
            cancelLabel: '取消', //取消按钮文本
            customRangeLabel: '自定义',
            daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
            monthNames: ['一月', '二月', '三月', '四月', '五月', '六月',
                '七月', '八月', '九月', '十月', '十一月', '十二月'
            ],
            firstDay: 1
        }
    }).on("hide.daterangepicker",function (ev) {
        //触发DOM对象上的原生input事件
        this.dispatchEvent(new Event('input'))
    });
});

需要特别注意的就是最后on方法中对hide.daterangepicker事件进行处理，在处理的方法中手动触发时间。

而至于该input的openDate属性在vue中的相关代码如下：

var vm = new Vue({
    //....
    data: {
//....
        openDate:"",
//....
    },
    //...
});

至此，日期控件可正确相应，并且vue也能够拿到日期控件中值的变化。

原文链接《daterangepicker与vue集成，vue无法获得日期控件时间的修改解决方法》