elementUI+vue中的日期选择器的编辑和回显

你的名字 2023-07-25 12:51 85阅读 0赞

1. 格式化日期

可以将UTC格式日期转成普通的年月日

UTC格式日期如下：
2020-03-01T00:00:00.000+0800
在这里插入图片描述
普通年月日如下：

2020-03-01

在这里插入图片描述

转换代码如下：

  1. // 格式化日期
  2.     formatter (thistime, fmt) { 
  3.       let $this = new Date(thistime)
  4.       let o = { 
  5.         'M+': $this.getMonth() + 1,
  6.         'd+': $this.getDate(),
  7.         'h+': $this.getHours(),
  8.         'm+': $this.getMinutes(),
  9.         's+': $this.getSeconds(),
  10.         'q+': Math.floor(($this.getMonth() + 3) / 3),
  11.         'S': $this.getMilliseconds()
  12.       }
  13.       if (/(y+)/.test(fmt)) { 
  14.         fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
  15.       }
  16.       for (var k in o) { 
  17.         if (new RegExp('(' + k + ')').test(fmt)) { 
  18.           fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
  19.         }
  20.       }
  21.       return fmt
  22.     },

2. 转换日期

  1. var irrigStart = this.formatter(response.data.irrigStart,'yyyy-MM-dd');

使用方法，就是this.formatter('数据','yyyy-MM-dd')
返回的就是标准的日期格式

3. 给日期选择器回显

  1. var irrigStart = this.formatter(response.data.irrigStart,'yyyy-MM-dd');
  2. var irrigEnd = this.formatter(response.data.irrigEnd,'yyyy-MM-dd');
  3. var arrayObj = new Array();
  4. arrayObj.push(response.data.irrigStart,response.data.irrigEnd);

回显的就是我们要的日期格式

效果如下：

在这里插入图片描述

4. 不添加任何代码直接要求正常回显

回显不正常因为没有转成相应的格式
所以在赋值的时候new Date()格式化一下日期就行了
回显正常，日期是标准的UTC格式

  1. var arrayObj = new Array();
  2. arrayObj.push(new Date(response.data.irrigStart));
  3. arrayObj.push(new Date(response.data.irrigEnd));

效果如下：
在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

    相关 JSP——编辑时的回显

      “回显”——就是在键盘上按下一个“键”，如果在电脑上同时显示出你按的内容。而标题的编辑回显则是：一个表格有很多条数据，每条数据有一个“编辑”按钮，点击一条数据的“编辑”按钮

    野性酷女野性酷女/ 0 赞/ 463 阅读

    相关 Antd日期回显

    Antd 日期回显，注意看下图的右上角日期 ![在这里插入图片描述][20190412174526859.gif] 其实只要创建好了 Moment对象，然后再用set

    清疚清疚/ 0 赞/ 759 阅读