概述
在使用element-plus中的日期选择器时，我们经常需要设置value-format属性来自定义日期的格式。然而，有时候我们会遇到一个问题，就是当我们设置了value-format后，日期选择器的值格式不正确，导致不能正确地显示日期。
问题分析
常见的日期格式如"yyyy-MM-dd"，"yyyy-MM-dd HH:mm:ss"等都是常用的格式，通常我们会将这种格式作为value-format的值，然而，在某些情况下，我们会发现在使用这些常用格式时，日期选择器的值显示不正确。主要原因是value-format的格式与value的值格式不匹配。
解决方案
在解决这个问题之前，我们需要了解一下value-format和value的关系。value是日期选择器的当前值，而value-format则是用于将value的值格式化为字符串的格式。所以，value的值必须与value-format的格式相匹配，否则将会导致值格式错误。
解决这个问题的最简单的方法是，根据value的实际格式，调整value-format的格式。比如，如果value的值格式为"yyyy/MM/dd HH:mm:ss"，那么你需要将value-format的值设置为"yyyy/MM/dd HH:mm:ss"才能正确显示日期。
另外，如果你想自定义value的显示格式，你可以使用element-plus文档中提供的日期格式符，如下所示：
- 年份：
yyyy，例："1990" - 月份：
MM，例："05" - 日期：
dd，例："10" - 小时：
HH，例："19" - 分钟：
mm，例："30" - 秒钟：
ss，例："00"
根据你的需求，组合这些日期格式符可以得到你想要的日期显示格式。
示例
下面是一个示例代码，展示了如何正确设置value-format来显示日期：
<template>
<el-date-picker
v-model="selectedDate"
value-format="yyyy/MM/dd"
:default-value="new Date()"
placeholder="选择日期"
format="yyyy/MM/dd">
</el-date-picker>
</template>
<script>
export default {
data() {
return {
selectedDate: null
}
}
}
</script>
在上面的示例中，我们设置了value-format为"yyyy/MM/dd"，并将value的值设置为当前日期。这样，日期选择器将正确地显示日期。
总结
在使用element-plus的日期选择器时，如果遇到value-format设置后值格式不正确的问题，我们需要确保value的值格式与value-format的格式相匹配。根据实际情况调整value-format的格式，或者使用element-plus文档提供的日期格式符来自定义日期显示格式。通过正确设置value-format，我们可以解决这个问题并正确地显示日期。
本文来自极简博客，作者：开源世界旅行者，转载请注明原文链接：element-plus日期选择器设置 value-format后出错，值格式不对
