美文网首页
element时间选择组件日期格式化

element时间选择组件日期格式化

作者: 顺小星 | 来源:发表于2019-12-05 11:49 被阅读0次

    又见面了鸭!


    需求:

    在使用element组件选择日期的时候:


    image.png

    获取到的日期格式是这样的:


    image.png

    但是要传给后台是这样的:


    image.png

    解决办法:

    1、在src文件夹中新建一个【javascript】的文件夹;
    2、在【javascript】中创一个【format】的js文件;


    image.png

    3、将下述代码全复制进【format】的js文件中,并在需要格式化时间的组件中引用:

    export function formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'H+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        }
      }
      return fmt;
    };
    
    function padLeftZero(str) {
      return ('00' + str).substr(str.length);
    }
    

    4、在时间选择组件上定义一个【@change="selectTime"】的方法

    image.png

    5、将要传给后台的开始日期及结束日期,格式化之后赋值:


    image.png
    selectTime(selval) {
         if (selval) {
            this.obj.startTime = this.CONVERTYODATE(selval[0]);
            this.obj.endTime = this.CONVERTYODATE(selval[1]);
          } else {
            this.obj.startTime = null;
            this.obj.endTime = null;
            }
          },
    

    OK了鸭!

    相关文章

      网友评论

          本文标题:element时间选择组件日期格式化

          本文链接:https://www.haomeiwen.com/subject/pirdgctx.html