elementUI 周选择器将选择后时间展示修改为yyyy-MM-dd ~ yyyy-MM-dd的格式

在Element UI的周选择器（el-date-picker 类型为 week）中，可以通过设置format属性来定义显示的日期格式。但是，周选择器默认不支持yyyy-MM-dd这样的格式，因为它选择的是一个周。

如果你想要显示为yyyy-MM-dd ~ yyyy-MM-dd这样的格式，你需要自定义一个周视图并结合Element UI的日期选择器（el-date-picker 类型为 daterange）来实现。

以下是一个简单的示例，展示如何使用el-date-picker类型为daterange来选择一周的起始和结束日期，并以yyyy-MM-dd的格式显示：

<template>
  <el-date-picker
    v-model="dateRange"
    type="daterange"
    format="yyyy-MM-dd"
    value-format="yyyy-MM-dd"
    :default-time="['00:00:00', '23:59:59']"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    @change="handleDateChange"
  ></el-date-picker>
</template>
 
<script>
export default {
  data() {
    return {
      dateRange: [],
    };
  },
  methods: {
    handleDateChange(value) {
      if (value && value.length === 2) {
        const start = this.$moment(value[0]).format('YYYY-MM-DD');
        const end = this.$moment(value[1]).format('YYYY-MM-DD');
        console.log(`${start} ~ ${end}`);
      }
    },
  },
};
</script>

在这个示例中，我们使用了daterange类型的el-date-picker来让用户选择一周的开始和结束日期。我们设置了format和value-format为yyyy-MM-dd来格式化日期。我们还为el-date-picker添加了start-placeholder和end-placeholder属性来设置输入框的提示文本。最后，我们通过监听change事件来获取用户选择的日期范围，并将其转换为yyyy-MM-dd格式的字符串。

请确保你已经安装并导入了moment.js，因为$moment是基于moment.js的，它用于处理日期格式化。

npm install moment --save

在你的main.js或相应的入口文件中导入moment.js：

import moment from 'moment';
 
Vue.prototype.$moment = moment;

这样就可以在你的Vue组件中使用this.$moment来访问moment.js的功能了。