el-date-picker改日期显示方式

最新推荐文章于 2024-05-11 14:31:22 发布

iiiilooaixuud

最新推荐文章于 2024-05-11 14:31:22 发布

阅读量540

点赞数

分类专栏：页面遇到的基础问题文章标签：前端

本文链接：https://blog.csdn.net/qq_46617584/article/details/133129026

版权

页面遇到的基础问题专栏收录该内容

101 篇文章 3 订阅

订阅专栏

效果：

代码：

<template>
  <div>
    <el-date-picker v-model="selectedDate" type="date" @input="handleDateChange">
      <template #default="{ date }">
        <span>{{ formatDate(date) }}</span>
      </template>
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    }
  },
  methods: {
    handleDateChange(date) {
      console.log(date) // 打印选中的日期
    },
    formatDate(date) {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const weekDay = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][date.getDay()]
      return `${year}-${month}-${day} ${weekDay}`
    }
  }
}
</script>