(el-Date-Picker)操作(不使用 ts)：Element-plus 中 DatePicker 组件的使用及输出想要日期格式需求的解决过程

Ⅰ、Element-plus 提供的DatePicker日期选择器组件与想要目标情况的对比：

1、Element-plus 提供DatePicker组件情况：

其一、Element-ui 自提供的DatePicker代码情况为(示例的代码)：

// Element-plus 提供的组件代码:
<template>
  <el-radio-group v-model="size" aria-label="size control">
    <el-radio-button value="large">large</el-radio-button>
    <el-radio-button value="default">default</el-radio-button>
    <el-radio-button value="small">small</el-radio-button>
  </el-radio-group>
  <div class="demo-date-picker">
    <div class="block">
      <span class="demonstration">Default</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="Pick a day"
        :size="size"
      />
    </div>
    <div class="block">
      <span class="demonstration">Picker with quick options</span>
      <el-date-picker
        v-model="value2"
        type="date"
        placeholder="Pick a day"
        :disabled-date="disabledDate"
        :shortcuts="shortcuts"
        :size="size"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import {
   
    ref } from 'vue'

const size = ref<'default' | 'large' | 'small'>('default')

const value1 = ref('')
const value2 = ref('')

const shortcuts = [
  {
   
   
    text: 'Today',
    value: new Date(),
  },
  {
   
   
    text: 'Yesterday',
    value: () => {
   
   
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
   
   
    text: 'A week ago',
    value: () => {
   
   
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]

const disabledDate = (time: Date) => {
   
   
  return time.getTime() > Date.now()
}
</script>

<style scoped>
.demo-date-picker {
   
   
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
   
   
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
   
   
  border-right: none;
}

.demo-date-picker .demonstration {
   
   
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

代码地址：https://element-plus.org/zh-CN/component/date-picker.html

其二、页面的显示情况为：

其三、页面想要的显示情况为：

Ⅱ、在项目中使用 DatePicker 组件遇到的问题：

1、遇到的问题：

使用该 DatePicker 组件遇到的问题：
其一、主要是处理后台返回的数据值，使其能在日期属性中正常展示;
其二、摸索该 DatePicker 组件，使其输出数据类型为：2024-07-02;

2、无默认值，默认输出类型为：Tue Jul 09 2024 00:00:00 GMT+0800 (中国标准时间)(输出日期对象)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-date-picker 值后下发的数据类型;

//第一步：
const value1 = ref('')


//第二步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="value1" type="date" format="YYYY/MM/DD" placeholder="选择日期"/>
</el-form-item>


//第三步：提交的操作;
dateTimeObj.date = value1.value

其二、截图为：

//不给日期属性设置初始值时，输出的数据类型为：Tue Jul 09 2024 00:00:00 GMT+0800 (中国标准时间)(输出日期对象)

3、无默认值，默认输出类型为：2024-07-10(使用格式)

其一、代码为：

// 注意：此时没有从后台获取值来展示，而只是切换 el-date-picker 值后下发的数据类型;

//第一步：
const value1 = ref('')


//第二步：
<el-form-item label="日期[YYYY-MM-DD]:" prop="dateValue">
    <el-date-picker v-model="value1" type="date" format="YYYY/MM/DD" value-format="YYYY-MM-DD" placeholder="选择日期"/>
</el-form-item>


//第三步：提交的操作;
dateTimeObj.date = value1.v