elementUI 中 date

elementUI 中 date"/>

elementUI 中 date

目录

• 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 localelocale 配置语言代码
• 在 element-plus 中的 date-picker，format 与 value-format 中的格式化字符都要用 大写
• date-picker 单独选择一个时间，v-model 绑定一个 字符串（string），date-picker 选择一个时间范围，v-model 绑定一个 数组（[]）