博客

使用datepicker遇到了两个问题：

一、无法绑定

当选择好开始时间与结束时间后，去修改其他字段，开始时间与结束时间会被清空。

在网上找解决方案时，参考这篇http://www.youtiy.com/detail_308.html解决了这个问题

通过在datetimepicker的回调函数中用vue.set对开始时间、结束时间 两个字段赋值；editVM.activity 为实体，”StartTime”为实体的属性，startTime为值，Vue.set的具体方法可参考文档，

var  editVM = new Vue({
        el: "#Edit_VM",
        data:{
            
            activity: {
                   StartTime:'',
                   EndTime:'',
                   Name:'',
            },                                           
          
        },
        mounted:function(){
            var _self = this;
            $(".datetimepicker").datetimepicker({
                autoclose: true,
                todayHighLight: true,
                language: 'zh-CN'

            }).on('changeDate', function (ev) {
                var _self = this;
                var startTime = $("#StartTime").val();
                var endTime = $("#EndTime").val();
                 /*
                   *editVM换成_self.activity报错，不知道为什么*
                   */
                Vue.set(editVM.activity, "StartTime", startTime);
           
                Vue.set(editVM.activity, "EndTime", endTime);

                
            }); 

        }

二、无法提交数据

此时可以绑定v-model 与 开始时间 和结束时间 都在 activity对象 中，提交数据时 提示StartTime和EndTime为空;

我猜测跟StarTime 与 EndTime 无法绑定v-model有关，于是把这两个值放在另一个对象Time中

 data:{         
            activity: {
                 Name:'',  
            },
         
            Time: {
                StartTime: '',
                EndTime: '',
            }                  
          
     },
mounted：function(){
     var _self = this;
            $(".datetimepicker").datetimepicker({
                autoclose: true,
                todayHighLight: true,
                language: 'zh-CN'

            }).on('changeDate', function (ev) {
                var _self = this;
                var startTime = $("#StartTime").val();
                var endTime = $("#EndTime").val();
                //改成Time对象
                Vue.set(editVM.Time, "StartTime", startTime);
                Vue.set(editVM.Time, "EndTime", endTime);

               
       });
}

通过Time对象传递数据，然后就可以传过来了：

我觉得这个方法不太完美 ，又在网上找了另一个解决方案，详情见下一篇

vue使用boostrap的datepicker 数据无法绑定与无法提交（二）