如果你想在 <el-date-picker> 组件中只显示月份和日期，而不希望展示年份，你可以通过自定义格式化输入来实现这一点。虽然 Element UI 的 el-date-picker 本身会包含年份，但你可以使用 JavaScript 来处理用户的输入和显示。
以下是一个可能的解决方案，利用 Vue 的计算属性或方法进行格式化：
示例代码
<template>
<div>
<el-date-picker
v-model="dateRange"
type="daterange"
value-format="YYYY-MM-DD"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="formatDateRange">
</el-date-picker>
<p>选择的日期范围: {{ formattedDateRange }}</p>
</div>
</template>
<script>
export default {
data() {
return {
dateRange: [],
formattedDateRange: '',
};
},
methods: {
formatDateRange() {
if (this.dateRange.length === 2) {
const start = this.formatDate(this.dateRange[0]);
const end = this.formatDate(this.dateRange[1]);
this.formattedDateRange = `${start} 至 ${end}`;
} else {
this.formattedDateRange = '';
}
},
formatDate(date) {
// 格式化日期为 MM-DD
const options = { month: '2-digit', day: '2-digit' };
return new Intl.DateTimeFormat('zh-CN', options).format(new Date(date));
}
},
};
</script>
<style scoped>
/* 添加样式（如有需要） */
</style>
实现步骤
- v-model：使用
v-model来绑定选择的日期范围。 - @change：当用户选择日期时，触发
formatDateRange方法。 - formatDate方法：这个方法将输入的完整日期格式转换为 “MM-DD” 格式，并更新一个新的变量
formattedDateRange。 - 展示：在模板中显示这个格式化后的字符串。
注意事项
- 在用户选择后，你仍然可以保存原始值（包括年份），以便进行计算或存储，只是在页面上展示的时候用这种方式格式化。
- 此外，如果需要进一步美观或者功能上的完善，可以根据需求调整样式或者交互逻辑。
以上方法能够帮助您实现只显示月份和日期，而隐藏年份的信息。
内容由零声教学AI助手提供，问题来源于学员提问
![// 调用 zipImage 方法时
const zipBase64 = this.zipImage(images);
zipBase64返回的是Promise数据集，数据集中包含Base64数据，数据集格式如下：
imgStr1qwe Promise {<pending>}__proto__: Promise[[PromiseState]]:](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162238408381987.png)
