专栏首页丑胖侠daterangepicker与vue集成,vue无法获得日期控件时间的修改解决方法

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

版权声明:本文为博主原创文章,遵循 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也能够拿到日期控件中值的变化。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vuex是什么?Vuex能做什么?Vuex怎么使用?

    前段时间,有小伙伴问我,Vuex是怎么玩儿的?也是一直没有机会,趁着今天有空,一起来学习一波。

    Javanx
  • VUE开发一个组件——移动端弹出层(IOS版)

    再造一轮,vue移动端弹出层,包括confrim询问框,tips提示框,popup选择器等。

    Javanx
  • vue响应式原理(数据双向绑定的原理)

    每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。

    Javanx
  • Vue最佳实践

    Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上...

    用户6167509
  • VUE开发一个组件——Vue Slider 双向两滑块限定区域

    很多现有的vue slider组件都是单个滑块,一次业务需要,只能自己动手来一个了。双向两滑块限定区域,实现过滤功能了。

    Javanx
  • vue 内置过滤器总结(附加自定义过滤器)

    vue中过滤器filters的作用是什么? 能够帮我们处理快速一些数据的格式----format数据格式化处理。 语法也很简单

    Javanx
  • Vue经典面试题总结(含答案)

    MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;...

    Javanx
  • vue组件-template和slot插槽详细介绍

    vue项目,组件应用非常广泛,感觉只要能被多个地方复用的代码,都可以写成组件,这样不用做重复的工作。github上面也有很多大牛制造了n个轮子,方便大家使用。之...

    Javanx
  • 8种vue组件通信方式详细解析实例

    对于vue来说,组件是非常常见的,有很多平台都封装了了属于自己一套的组件,如element ui、we ui等等。同时组件之间的消息传递也是非常重要的,下面是我...

    Javanx
  • 从零开始搭建 VUE + Element UI后台管理系统框架

    后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容。比如阿里云、七牛云、头条号、百家号等等,他们的管理系统都是这样的。

    Javanx

扫码关注云+社区

领取腾讯云代金券