element-ui的el-date-picker组件设置了默认日期和格式化串但提交没有格式化问题解决

案发现场：

1、el-date-picker日期控件，设置了日期的格式 value-format=”yyyy-MM-dd”

<el-date-picker v-model="form.regDateBeg" type="date" value-format="yyyy-MM-dd" placeholder="开始日期"></el-date-picker>

 

 <el-form-item label="4. 时间段选择">
            <span>开始时间：</span>
            <el-date-picker
              class="c-wp25"
              v-model="startTime"
              value-format="yyyyMMdd"
              type="date"
              readonly:true
              placeholder="选择日期"
               :picker-options="pickerStartOptions"
            ></el-date-picker>
            <span class="c-ml10">结束时间：</span>
            <el-date-picker
              class="c-wp25"
              v-model="endTime"
              value-format="yyyyMMdd"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerEndOptions"

            ></el-date-picker>
          </el-form-item>

 

 2、regDateBeg参数设置默认值 regDateBeg: new Date(),

var faiSearchObj = new Vue({
    el: '.fai-payRecord-search',
    data: {
        form: {
            regDateBeg: new Date(),//这个日期参数
            ...(其他无关参数，省略)
        }
    },
    methods: {
        onSubmit() {
            console.log(this.form.payDateBeg);  
        }
    }
});

你会发现，在前端页面显示的日期是 yyyy-MM-dd 的格式 
但是，提交表单的时候，payDateBeg的值是Tue May 22 2018 19:30:21 GMT+0800 (中国标准时间) 
然后，在手动点选择了控件的日期后再提交表单，这时payDateBeg的值就是value-format指定的格式。 

 

有点意思

---

猜想： el-date-picker日期控件默认值是不会经过格式化的，所以设定默认值需要自己先转换格式

解决办法：自己写个工具类，把默认日期转换成指定的格式，代码如下：

function dateFormatter(str){//默认返回yyyy-MM-dd HH-mm-ss
    var hasTime = arguments[1] != false ? true : false;//可传第二个参数false，返回yyyy-MM-dd
    var d = new Date(str);
    var year = d.getFullYear();
    var month = (d.getMonth()+1)<10 ? '0'+(d.getMonth()+1) : (d.getMonth()+1);
    var day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
    var hour = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
    var minute = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
    var second = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
    if(hasTime){
        return [year, month, day].join('-') + " " + [hour, minute, second].join(':');
    }else{
        return [year, month, day].join('-');
    }
}

再修改 regDateBeg 的默认赋值 

var faiSearchObj = new Vue({
    el: '.fai-payRecord-search',
    data: {
        form: {
            regDateBeg: dateFormatter(new Date(), false),//这个日期参数，这里做了修改
            ...(其他无关参数，省略)
        }
    },
    methods: {
        onSubmit() {
            console.log(this.form.payDateBeg);  
        }
    }
});
--------------------- 
作者：markix 
来源：CSDN 
原文：https://blog.csdn.net/qq_31772441/article/details/80410508 
版权声明：本文为博主原创文章，转载请附上博文链接！