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

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

### 1. 格式化日期 ###

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

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

`2020-03-01`

![在这里插入图片描述][20200415103809681.png]

转换代码如下：

// 格式化日期
        formatter (thistime, fmt) { 
          let $this = new Date(thistime)
          let o = { 
            'M+': $this.getMonth() + 1,
            'd+': $this.getDate(),
            'h+': $this.getHours(),
            'm+': $this.getMinutes(),
            's+': $this.getSeconds(),
            'q+': Math.floor(($this.getMonth() + 3) / 3),
            'S': $this.getMilliseconds()
          }
          if (/(y+)/.test(fmt)) { 
            fmt = fmt.replace(RegExp.$1, ($this.getFullYear() + '').substr(4 - RegExp.$1.length))
          }
          for (var k in o) { 
            if (new RegExp('(' + k + ')').test(fmt)) { 
              fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
            }
          }
          return fmt
        },

### 2. 转换日期 ###

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

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

### 3. 给日期选择器回显 ###

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

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

**效果如下：**

![在这里插入图片描述][20200415104809844.png]

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

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

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

**效果如下：**  
![在这里插入图片描述][20200415104535274.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtYm95X3c_size_16_color_FFFFFF_t_70]: /images/20230528/618eb9d7f3834fb08d9faf9e66b756bd.png
[20200415103809681.png]: /images/20230528/7dec3738e4994efcbf66dfb46a31071d.png
[20200415104809844.png]: /images/20230528/84c200e5d88b4653b5c51d99d0c4c974.png
[20200415104535274.png]: /images/20230528/8fb2cce3e9ac4f65bb23cc0f0c2a1f66.png