elementUI 中 date-picker 的使用的坑（vue3）

364.99°2023-10-22 21:04

1. 英文显示

html 复制代码

          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
		  >
          </el-date-picker>

解决方案：

引用 zhCn

html 复制代码

<script>
import zhCn from "element-plus/dist/locale/zh-cn";
export default {
  data() {
    return {
      locale: zhCn,
      dateValue: '',
    }
  }
}
</script>

config-provider 作为父标签

html 复制代码

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-config-provider>

效果

2. format 与 value-format 无效

默认情况：

html 复制代码

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-config-provider>

效果：

输入框
dateValue

格式化之后：

html 复制代码

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-config-provider>

效果：

输入框
dateValue

肉眼可见，月份的格式化是对的即 MM，那我们就把其他两个也改成大写

html 复制代码

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-config-provider>

效果：
dateValue

3. date-picker 时间范围

html 复制代码

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValues"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            >
          </el-date-picker>
        </el-config-provider>

如果是时间范围，v-model 要绑定一个数组类型变量。

js 复制代码

	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 绑定一个 数组（[]）

elementUI 中 date-picker 的使用的坑（vue3）

目录

1. 英文显示

2. format 与 value-format 无效

3. date-picker 时间范围

4. 小结