在Vue下使用WdatePicker插件遇到的问题
在使用WdatePicker时碰到了选择的日期没有同步到Vue的属性中去的问题。一开始是通过Jq获取相应元素的方式获得其值再赋值给对应的属性,之后阅读了api稍微做了一下优化,代码如下。HTML<div id="example"><input type="text" v-model="date"
·
在使用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事件,有特殊需要也可以自行添加),做相同的操作就可以了。
更多推荐
已为社区贡献1条内容
所有评论(0)