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 绑定一个 数组([])
相关推荐
@AfeiyuO1 天前
el-table 表格嵌套表格
前端·elementui·vue
shuaijie05182 天前
表格单元格输入框转换-其一
javascript·elementui
Z_B_L2 天前
问题记录--elementui中el-form初始化表单resetFields()方法使用时出现的问题
前端·javascript·vue.js·elementui·1024程序员节
Onlyᝰ2 天前
前端tree树
javascript·vue.js·elementui
hongc933 天前
element-ui el-table 设置固定列fixed 高度不对
前端·vue.js·elementui
Sheldon一蓑烟雨任平生4 天前
Vue3 表单输入绑定
vue.js·vue3·v-model·vue3 表单输入绑定·表单输入绑定·input和change区别·vue3 双向数据绑定
麦麦大数据4 天前
D026 vue3+django 论文知识图谱推荐可视化系统 | vue3+vite前端|neo4j 图数据库
前端·django·vue3·知识图谱·推荐算法·论文文献·科研图谱
duansamve5 天前
Vue3和vue2的Diff算法有何差异?
vue·vue3·vue2·diff
JNU freshman6 天前
Element Plus组件
前端·vue.js·vue3
欧阳呀6 天前
Vue+element ui导入组件封装——超级优雅版
前端·javascript·vue.js·elementui