daterangepicker与vue集成，vue无法获得日期控件时间的修改解决方法
- 2019 年 10 月 4 日
- 筆記
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo541075754/article/details/100674691
在后端管理项目中使用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也能够拿到日期控件中值的变化。
