本文已参与「新人创作礼」活动，一起开启掘金创作之路。

两行代码搞定日期展示

需求：在 element-plus 中给 time-picker 提供默认值 start 是本月的 1 号，end 是当前时间

结论：

<template>
  <el-timepicker v-model="timePair" />
</template>

<script lang="ts" setup>
import dayjs from 'dayjs'

const now = dayjs().format('YYYY-mm-dd HH:MM:SS')
const timePair = ref([now.slice(0, 8) + '01 00:00:00', now])
</script>

过程

一开始想着Python可以直接用f'{datetime.now():%Y-%m-%d}', js应该也有差不多的吧；Google了一下，果然CSDN上有篇博客写着可以用：new Date().format('YYYY-mm-dd') 没想到yarn dev的时候直接报错了，说是Date.format方法已废弃
看了好多个网页，也没发现原生js有什么优雅的写法，遂决定用第三方库
对比了dayjs和moment.js，个人感觉dayjs属于轻量级的，moment则是更精确对时区支持更好

由于项目是给内部用的，对时间精确度没什么要求，也不需要考虑时区，所以决定采用dayjs。于是就有了结论里的那几行干净利索的代码，当然dayjs应该有方法可以获取本月的第一天，然后再format成字符串。不过对它不熟，以后有需要了再继续研究，slice也挺简单易懂的。

附

顺便贴一下，我搜到的大多数的时间格式化写法： Ref：www.jianshu.com/p/49fb78bca…

function dateFormat(fmt, date) {
    let ret;
    const opt = {
        "Y+": date.getFullYear().toString(),        // 年
        "m+": (date.getMonth() + 1).toString(),     // 月
        "d+": date.getDate().toString(),            // 日
        "H+": date.getHours().toString(),           // 时
        "M+": date.getMinutes().toString(),         // 分
        "S+": date.getSeconds().toString()          // 秒
        // 有其他格式化字符需求可以继续添加，必须转化成字符串
    };
    for (let k in opt) {
        ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
        };
    };
    return fmt;
}

let date = new Date()
dateFormat("YYYY-mm-dd HH:MM", date)
// 2019-06-06 19:45

优雅永不过时，精益求精才是真正的工匠之心~

记一次使用dayjs进行日期格式化的实战经历

两行代码搞定日期展示

结论：

过程

附