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 绑定一个 数组([])
相关推荐
昔冰_G2 天前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
wxr06164 天前
部署Spring Boot项目+mysql并允许前端本地访问的步骤
前端·javascript·vue.js·阿里云·vue3·springboot
知识分享小能手5 天前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
xcg3401238 天前
ElementUI-Table 表格实现行拖拽
elementui·table·行拖拽
rggrgerj8 天前
VUE3+element plus 实现表格行合并
javascript·vue.js·elementui
fxshy8 天前
Vue3和element plus在el-table中使用el-tree-select遇到的change事件坑
javascript·vue.js·elementui
北慕阳8 天前
自存19-48
javascript·vue.js·elementui
_Legend_King10 天前
高德地图实现经纬度及获取编码、所属行政区、GIS
javascript·vue.js·elementui
上单带刀不带妹10 天前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
雪山上的小灰熊12 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks