在使用WdatePicker时碰到了选择的日期没有同步到Vue的属性中去的问题。一开始是通过Jq获取相应元素的方式获得其值再赋值给对应的属性,之后阅读了api稍微做了一下优化,代码如下。

HTML

<div id="example">
        <input type="text" v-model="date" id="data_WdatePicker" v-on:click="datePicker('data_WdatePicker')" />
</div>

给input元素绑定属性date,同时在click事件上将自身的id传递给方法。

JS

var vm = new Vue({
            el: "#example",
            date:{
                data:null
            },
            methods: {
                datePicker: function (elementId) {
                    let vueObj = this;
                    WdatePicker({
                        el: elementId,
                        dateFmt: 'yyyy-MM-dd',//日期格式,可以只显示年或年月,也可以额外显示时间
                        onpicked: function () {
                            var value = $("#" + elementId).val();
                            vueObj.date = value;
                        },
                        oncleared: function () {
                            vueObj.date = null;
                        },
                        isShowClear: true,
                        readOnly: true
                    });
                }
            }
        });

点击日期插件触发click事件调用方法datePick,将元素ID作为配置项。接下来是重点,wdatepicker点击日期后会触发它的onpicked事件,我们给这个事件添加一个方法,获取ID为我们传入ID的元素的value,将其赋值给vue中的属性(在插件内使用this并不能指向vue,因此需要在插件外将this赋值给vueObj作为过渡)。同理点击日期插件的清空按钮会触发oncleared事件(其实还有onclearing事件,有特殊需要也可以自行添加),做相同的操作就可以了。

 

Logo

前往低代码交流专区

更多推荐