目录
- 1. 英文显示
- 2. format 与 value-format 无效
- 3. date-picker 时间范围
- 4. 小结
1. 英文显示
<el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"></el-date-picker>
解决方案:
-
引用 zhCn
<script> import zhCn from "element-plus/dist/locale/zh-cn"; export default {data() {return {locale: zhCn,dateValue: '',}} } </script> -
config-provider 作为父标签
<el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"></el-date-picker></el-config-provider> -
效果

2. format 与 value-format 无效
默认情况:
<el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"></el-date-picker></el-config-provider>
效果:
- 输入框

- dateValue

格式化之后:
<el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"format="yyyy-MM-dd"value-format="yyyy-MM-dd"></el-date-picker></el-config-provider>
效果:
-
输入框

-
dateValue

肉眼可见,月份的格式化是对的即 MM,那我们就把其他两个也改成大写
<el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"></el-date-picker></el-config-provider>
- 效果:

- dateValue

3. date-picker 时间范围
<el-config-provider :locale="locale"><el-date-pickerv-model="dateValues"type="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"></el-date-picker></el-config-provider>
如果是时间范围,v-model 要绑定一个数组类型变量。
export default {data() {return {locale: zhCn,dateValues: [],}}}
- 效果:

- dateValues:

4. 小结
- 英文显示改成中文显示需要,引入 zhCn ,然后加个父标签 config-provider locale
locale配置语言代码 - 在 element-plus 中的 date-picker,
format与value-format中的格式化字符都要用大写 - date-picker 单独选择一个时间,v-model 绑定一个
字符串(string),date-picker 选择一个时间范围,v-model 绑定一个数组([])