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 绑定一个 数组([])
相关推荐
Wiktok3 天前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
蓝胖子的多啦A梦3 天前
【前端】VUE+Element UI项目 页面自适应横屏、竖屏、大屏、PDA及手机等适配方案
前端·javascript·elementui·html·前端页面适配
Wiktok3 天前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok4 天前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
wangbing11254 天前
界面规范11-对话框
javascript·vue.js·elementui
知识分享小能手5 天前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3
Wiktok5 天前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
Jinuss5 天前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
知识分享小能手5 天前
React学习教程,从入门到精通,React 组件生命周期详解(适用于 React 16.3+,推荐函数组件 + Hooks)(17)
前端·javascript·vue.js·学习·react.js·前端框架·vue3
Hexene...6 天前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架