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 绑定一个 数组([])
相关推荐
海天胜景25 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
喜欢敲代码的程序员18 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w90892585918 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
hackchen1 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦1 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 天前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景1 天前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
满楼、11 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
ldj202011 天前
vue3整合element-plus
vue3
海天胜景11 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui