daterangepicker与vue集成，vue无法获得日期控件时间的修改解决方法
daterangepicker与vue集成，vue无法获得日期控件时间的修改解决方法
程序新视界
发布于 2019-09-18 10:55:01
发布于 2019-09-18 10:55:01
版权声明：本文为博主原创文章，遵循 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也能够拿到日期控件中值的变化。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019年09月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读