elementUI 中 date-picker 的使用的坑(vue3)

目录

  • [1. 英文显示](#1. 英文显示)
  • [2. format 与 value-format 无效](#2. format 与 value-format 无效)
  • [3. date-picker 时间范围](#3. date-picker 时间范围)
  • [4. 小结](#4. 小结)

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,formatvalue-format 中的格式化字符都要用 大写
  • date-picker 单独选择一个时间,v-model 绑定一个 字符串(string) ,date-picker 选择一个时间范围,v-model 绑定一个 数组([])
相关推荐
叫我阿柒啊1 小时前
Java全栈开发实战:从基础到微服务的深度解析
java·微服务·kafka·vue3·springboot·jwt·前端开发
Jinuss5 小时前
Vue3源码reactivity响应式篇之computed计算属性
前端·vue3
前端 贾公子10 小时前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐10 小时前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
赵得C20 小时前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
Jinuss20 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
小菜全1 天前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
Jinuss1 天前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
浩星1 天前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui