如何修改Vue3 Datepicker插件返回的日期格式？

你从组件拿到的Thu Jun 23 2022 17:14:00 GMT+0700 (Western Indonesia Time)是标准JavaScript Date对象，有两种方式可以转成Thu, 23 Jun 2022格式：

方案1：直接配置组件属性自动格式化 #

直接给Vue3 Datepicker组件绑定format属性指定目标格式，组件会自动输出格式化后的值，不需要额外写转换逻辑：

<template>
  <VueDatePicker v-model="dateValue" format="EEE, dd MMM yyyy" :locale="enLocale" />
</template>

<script setup>
import { ref } from 'vue'
import VueDatePicker from '@vuepic/vue-datepicker'
import '@vuepic/vue-datepicker/dist/main.css'
// 引入英文语言包，固定输出英文星期、月份
import en from '@vuepic/vue-datepicker/dist/locale/en'

const dateValue = ref()
const enLocale = en
</script>

用到的格式符对应规则：

• EEE：3位缩写星期名，例如Thu
• dd：2位日期，不足两位自动补0
• MMM：3位缩写月份名，例如Jun
• yyyy：4位完整年份

方案2：拿到原始Date对象后手动转换 #

如果不想修改组件配置，拿到原始日期值后写简单的格式化函数即可实现，不需要引入第三方日期库：

const formatToTarget = (date) => {
  const week = date.toLocaleDateString('en-US', { weekday: 'short' })
  const day = String(date.getDate()).padStart(2, '0')
  const month = date.toLocaleDateString('en-US', { month: 'short' })
  const year = date.getFullYear()
  return `${week}, ${day} ${month} ${year}`
}

// 调用示例
const rawDate = new Date('Thu Jun 23 2022 17:14:00 GMT+0700 (Western Indonesia Time)')
const result = formatToTarget(rawDate)
// 输出结果：Thu, 23 Jun 2022

内容的提问来源于stack exchange，提问作者Chairil Fauzi Firmansyah