vue+element时间格式化处理（解决保存少一天bug）

星_星
1,774 阅读2分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

这里除了是解决element ui和element-plus的保存天数bug外，顺便扩展一下对时间的格式化方法。

方法一 组件自带的格式化属性

<!-- vue2.0 -->
  <el-date-picker
    style="width: 100%"
    v-model="date"
    placeholder="请选择日期"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
  >
  </el-date-picker>
<!-- vue3.0 -->
  <el-date-picker
    style="width: 100%"
    v-model="date"
    placeholder="请选择日期"
    format="YYYY-MM-DD"
    value-format="YYYY-MM-DD"
  >
  </el-date-picker>

其中format属性是显示在输入框中的格式；
  value-format是绑定值的格式化；
字符之间的特殊字符就是格式化后的显示样式，比如以2000年1月1号为例：
YYYY-MM-DD格式化后会是2000-01-01这种样子的；
YYYY/MM/DD格式化后会是2000/01/01这种样子的；

YYYY是年份； MM是月份； DD是日期； 此外也有时分秒相关的字符，这个建议直接去看文档（element.eleme.cn/#/zh-CN/com…

其中element-plus的format是必须大写的（YYYY-MM-DD），不然可能会失效；
  element ui则是大小写混用（yyyy-MM-dd）
如果是要格式化为时间戳：

element-plus：value-format="x"
element ui：value-format="timestamp"

方法二 格式化日期

  表单保存时间相关的数据时，有时候会需要前端格式化；前端提交前使用下列格式化工具也能避免提交少一天的bug。

1、js slice方法(不建议使用)

至于为什么不建议还写上来，纯粹是我这真有个同事是这样写的，而且暂时还没出毛病，但不建议使用。

date = (date + "")?.slice(0, 4) + '年' + (date + "")?.slice(5, 7) + '月' + (date + "")?.slice(8, 10) + '日'

打印出来就是xxxx年xx月xx日，或者打印出来有些错乱...

2、使用js自带的格式化日期方法

function getTime() {
    var a = new Date()
    var b = a.toLocaleTimeString();//输出时 分 秒
    var c = a.toLocaleDateString();//输出年 月 日
    var d = c.split("/");
    if (d[1] < 10) {
        d[1] = '0' + d[1]
    }
    console.log('当前时间:', a);
    console.log('输出时分秒:', b);
    console.log('输出年月日:', c);
    console.log('转化格式:', d.join('-'));
}

打印效果：

image.png

缺点是不好加上中文，对于/或者-还可以。

3、使用依赖dayjs（推荐）

安装依赖：

npm install dayjs --save

封装为js方法

import dayjs from 'dayjs';
/**
 * @param date - 时间
 * @param type - 格式化类型（'YYYY-MM-DD'、'YYYY年MM月DD日'）
 */
export function formatDate(date, type) {
    var time = date;
    type = type || 'YYYY-MM-DD';
    time = dayjs(date).format(type);
    if (date == null || date == '' || date == undefined) {
        return '';
    } else {
        return time;
    }
}

组件使用：

import { formatDate } from "@/components/formatDate.js";

formatDate('日期','方法')

此格式化工具默认格式化为YYYY-MM-DD，可自定义。

avatar
文章
阅读
粉丝