jquery datetimepicker时间控件与Vue实现双向绑定,解决vue中无法绑定值的问题

这里的 jquery datetimepicker指的不是bootstrap版本

而是:
https://www.datetimepicker.cn/download/ 版本

问题:
当选定datetimepicker日期时,并没有给vue v-model 变量绑定值,但给v-model 设定值时,datetimepicker会取到值关响应

解决思路,jquery datetimepicker 没有设定v-model控件变量值,那提交表单时通过Jquery标签取值绑给v-model。

Html代码:

<div class="" id="app">				      
	<input type="text" id="datetimepicker1" class="form-control form-control-sm" v-model="model.expire_time" autocomplete="off">
</div>

js代码:

<script type="text/javascript">
	var app = new Vue({
	  el: '#app',
	  data: {
	  	model : {expire_time: '',}
	  },
	 methods: {
 		update(){
	   		this.model.expire_time=$('#datetimepicker1').val();
	    	axios.post('/user/save.html',
	    			this.model,
	    			{headers: {}}).then(
	    			res => (
	    				(res.data.code === 0)?(
	    					$('#myModal').modal("hide"),
		    				location.reload(true)
	    				)
	    				:
	    				(
	    					this.error = res.data.message
	    				)
	    			)
	    				
	    		)
	        .catch(function (error) { // 请求失败处理
	            console.log(error);
	          });
	      },
	      dateInit: function() {
	    	var self = this;
	    	var date = new Date();
			$.datetimepicker.setLocale('zh');
			$('#datetimepicker1').datetimepicker({
				theme:'default',
				format:'Y-m-d',
				defaultDate:new Date(),
				timepicker:false
		    });
		}
	},
	mounted: function() {
	  this.dateInit()
	}
});
</script>

注意:
这里用mounted()引入jquery事件,执行update()时通过
this.model.expire_time = $(‘#datetimepicker1’).val();进行绑定。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值