ElementUI日期组件错误, TypeError: date.getFullYear is not a function

原创
2020/03/28 12:01
阅读数 2.4W

一、问题:

在使用ElementUI 的日期选择组件时候回常遇到错误,针对于datetime选择时间到时分秒的情况

TypeError: date.getFullYear is not a function

问题原因:选择空间数据默认类型是时间Date类型,然而,我们从数据库读出来的一般是字符串格式,然后报错了。

 

解决方案:

讲数据库中读出输入格式化成Date类型,使用new Date() 处理即可。

      $.get(link, { id: id }, data => {
        if (data.startTime) {
          data.startTime = new Date(data.startTime);
        }
        if (data.endTime) {
          data.endTime = new Date(data.endTime);
        }
        _this.form = data;
        _this.selectedOptions = [data.cateID1, data.cateID2];

        //参数处理
        _this.initParam(data.orderParam);
      });
              <el-col :span="12">
                <el-form-item
                  prop="startTime"
                  label="开始时间"
                  :rules="[{required:true,message:'不能为空'}]"
                >
                  <el-date-picker
                    v-model="form.startTime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="endTime" label="结束时间" :rules="[{required:true,message:'不能为空'}]">
                  <el-date-picker
                    v-model="form.endTime"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetime"
                    placeholder="选择日期时间"
                  ></el-date-picker>
                </el-form-item>
              </el-col>

 

 

对应提交是根化修改处理:

  Date.prototype.toLocaleString = function () {   // 重写日期函数格式化日期
    return `${this.getFullYear()}-${this.getMonth() + 1 >= 10 ? (this.getMonth() + 1) : '0' + (this.getMonth() + 1)}-${this.getDate() >= 10 ? this.getDate() : '0' + this.getDate()} ${this.getHours() >= 10 ? this.getHours() : '0' + this.getHours()} : ${this.getMinutes() >= 10 ? this.getMinutes() : '0' + this.getMinutes()} : ${this.getSeconds() >= 10 ? this.getSeconds() : '0' + this.getSeconds()}`;
  };

 

提交将时间对象,变成字符串

    if (info.startTime&&typeof info.startTime == "object")
        info.startTime = info.startTime.format('yyyy-MM-dd HH:mm');

      if (info.endTime&&typeof info.endTime == "object")
        info.endTime =info.endTime.format('yyyy-MM-dd HH:mm');

 

更多:

Vue中ios系统浏览器下select标签第一个无法选中

Vue路由参数更新但是页面不刷新问题解决

 在Vue中使用腾讯地图API

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
1
分享
返回顶部
顶部