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

目录

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

1. 英文显示

          <el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"></el-date-picker>

解决方案:

  • 引用 zhCn

    <script>
    import zhCn from "element-plus/dist/locale/zh-cn";
    export default {data() {return {locale: zhCn,dateValue: '',}}
    }
    </script>
    
  • config-provider 作为父标签

            <el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"></el-date-picker></el-config-provider>
    
  • 效果

2. format 与 value-format 无效


默认情况:

        <el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"></el-date-picker></el-config-provider>

效果:

  • 输入框
  • dateValue

格式化之后:

        <el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"format="yyyy-MM-dd"value-format="yyyy-MM-dd"></el-date-picker></el-config-provider>

效果:

  • 输入框

  • dateValue

肉眼可见,月份的格式化是对的即 MM,那我们就把其他两个也改成大写

        <el-config-provider :locale="locale"><el-date-pickerv-model="dateValue"type="date"placeholder="选择日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"></el-date-picker></el-config-provider>
  • 效果:
  • dateValue

3. date-picker 时间范围

        <el-config-provider :locale="locale"><el-date-pickerv-model="dateValues"type="daterange"align="right"unlink-panelsrange-separator=""start-placeholder="开始日期"end-placeholder="结束日期"format="YYYY-MM-DD"value-format="YYYY-MM-DD"></el-date-picker></el-config-provider>

如果是时间范围,v-model 要绑定一个数组类型变量。

	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 绑定一个 数组([])

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/116345.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ARM CoreSight相关模块简介

最近在学习ARM CPU软硬件开发&#xff0c;对于CoreSight看到很多模块&#xff0c;简单总结了下。 1. DAP ARM DAP (Debug Access Port) 的主要作用是为调试工具提供直接访问 ARM 处理器和其它相关硬件的途径。DAP 是 ARM CoreSight 调试和追踪技术的一部分&#xff0c;它允许…

短视频矩阵系统源码/技术应用搭建

短视频矩阵系统开发围绕的开发核心维度&#xff1a; 1. 多账号原理开发维度 适用于多平台多账号管理&#xff0c;支持不同类型账号矩阵通过工具实现统一便捷式管理。&#xff08;企业号&#xff0c;员工号&#xff0c;个人号&#xff09; 2. 账号矩阵内容开发维护 利用账号矩…

C#调用C/C++从零深入讲解

C#调用非托管DLL从零深入讲解 一、结构对齐 结构对齐是C#调用非托管DLL的必备知识。 在没有#pragma pack声明下结构体内存对齐的规则为: 第一个成员的偏移量为0,每个成员的首地址为自身大小的整数倍子结构体的第一个成员偏移量应当是子结构体最大成员的整数倍结构体总大小…

Qt和Python结合开发Android应用

在移动应用开发领域,Android平台一直以来都备受开发者们的喜爱。然而,Android应用的开发通常需要使用Java或Kotlin等编程语言。但如果你是一位熟悉Qt和Python的开发者,你也可以借助这些工具来构建出色的Android应用。本文将介绍如何使用Qt调用Python来开发Android应用,以及…

使用Spyder进行动态网页爬取:实战指南

导语 知乎数据的攀爬价值在于获取用户观点、知识和需求&#xff0c;进行市场调查、用户画像分析&#xff0c;以及发现热门话题和可能的新兴领域。同时&#xff0c;知乎上的问题并回答也是宝贵的学习资源&#xff0c;用于知识图谱构建和自然语言处理研究。爬取知乎数据为决策和…

探索现代IT岗位:职业机遇的海洋

目录 1 引言2 传统软件开发3 数据分析与人工智能4 网络与系统管理5 信息安全6 新兴技术领域 1 引言 随着现代科技的迅猛发展&#xff0c;信息技术&#xff08;IT&#xff09;行业已经成为了全球经济的关键引擎&#xff0c;改变了我们的生活方式、商业模式和社会互动方式。IT行…

【C++和数据结构】模拟实现哈希表和unordered_set与unordered_map

目录 一、哈希的概念与方法 1、哈希概念 2、常用的两个哈希函数 二、闭散列的实现 1、基本结构&#xff1a; 2、两种增容思路 和 插入 闭散列的增容&#xff1a; 哈希表的插入&#xff1a; 3、查找 4、删除 三、开散列的实现 1、基本结构 2、仿函数Hash 3、迭代器…

React 中 keys 的作用是什么?

目录 前言&#xff1a;React 中的 Keys 的重要性 为什么 Keys 重要&#xff1f; 详解&#xff1a;key 属性的基本概念 用法&#xff1a;key 属性的示例 解析&#xff1a;key 属性的优势和局限性 优势&#xff1a; 局限性&#xff1a; key 属性的最佳实践 稳定的唯一标…

代码随想录二刷 Day46

10背包&#xff1a; 二维内侧与外侧都是正序遍历&#xff0c;二维的内侧与外侧是背包还是物品无所谓&#xff1b; 10背包&#xff1a; 一维外侧是正序&#xff0c;内侧是倒序&#xff1b; 目的是为了一个物品只选取一次&#xff1b;一维内侧一定要是背包&#xff1b;原因我想了…

SQL关于日期的计算合集

前言 在SQL Server中&#xff0c;时间和日期是常见的数据类型&#xff0c;也是数据处理中重要的一部分。SQL Server提供了许多内置函数&#xff0c;用于处理时间和日期数据类型。这些函数可以帮助我们执行各种常见的任务&#xff0c;例如从日期中提取特定的部分&#xff0c;计…

【2021研电赛】基于动态无线充电技术的自动驾驶小车

本作品介绍参与极术社区的有奖征集|分享研电赛作品扩大影响力&#xff0c;更有重磅电子产品免费领取! 参赛单位&#xff1a;北京交通大学 作品简介 近年来&#xff0c;电动汽车的发展得到了很多国家和车企的大力支持&#xff0c;但其仍然存在充电时间长、充电设施不齐全等问…

Java 数据结构

枚举 Java枚举是一种特殊的类&#xff0c;它用于定义有限个特定的值&#xff0c;例如一周的星期或者性别。枚举在Java中被视为数据类型&#xff0c;你可以使用它们来创建枚举类型的变量&#xff0c;然后使用那些枚举值等。 在Java中&#xff0c;声明枚举类型需要使用enum关键字…

迷你洗衣机哪个牌子好又实惠?小型洗衣机全自动

现在洗内衣内裤也是一件较麻烦的事情了&#xff0c;在清洗过程中还要用热水杀菌&#xff0c;还要确保洗衣液是否有冲洗干净&#xff0c;还要防止细菌的滋生等等&#xff0c;所以入手一款小型的烘洗全套的内衣洗衣机是非常有必要的&#xff0c;专门的内衣洗衣机可以最大程度减少…

乾坤js隔离

乾坤&#xff0c;作为一款微前端领域的知名框架&#xff0c;其建立在single-spa基础上。相较于single-spa&#xff0c;乾坤做了两件重要的事情&#xff0c;其一是加载资源&#xff0c;第二是进行资源隔离。而资源隔离又分为Js资源隔离和css资源隔离。 我们把Js隔离机制常常称作…

前端常用网址总结

https://blog.csdn.net/duanhy_love/article/details/110007515 在线CSS编辑 http://tool.alixixi.com/csseditor/ http://c.biancheng.net/css3/position.html https://www.runoob.com/css/css-positioning.html https://cssgrid-generator.netlify.app/ 开发常用组件网…

C#中获取代码执行时间的方法

在C#中&#xff0c;您可以使用System.Diagnostics.Stopwatch类来测量代码执行时间。以下是一个简单的示例&#xff1a; using System.Diagnostics; public static double MeasureExecutionTime(Action action) {Stopwatch stopwatch new Stopwatch();stopwatch.Start();actio…

SpringMVC(三)获取请求参数

1.1通过ServletAPI获取 SpringMVC封装的就是原生的servlet 我们进行测试如下所示&#xff1a; package com.rgf.controller.service;import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping;import javax.servlet.…

学习MAVEN

MAVEN的详细介绍和作用、意义 好的&#xff0c;小朋友们&#xff0c;我们今天来聊聊一个非常神奇的工具箱&#xff0c;它的名字叫做Maven! &#x1f31f; 1. **神奇的工具箱Maven**: Maven就像是一个神奇的工具箱&#x1f9f0;&#xff0c;它可以帮助大人们把他们的电脑工…

P2 B+树索引

文章目录 Task1 B树页B树页B树内部结点B树叶子结点 Task2 B树操作Task2 B树插入和搜索的单一值插入单一值搜索单一值 Task2 B树删除 Task3 叶子扫描的迭代器Task4 并行索引 Task1 B树页 B树页 实际上是每个B树页面的标题部分&#xff0c;包含叶子页面和内部页面共享的信息。 …

【Docker】Dockerfile常用指令

参考官方文档&#xff1a;https://docs.docker.com/engine/reference/builder/ Dockerfile常用指令 指令说明from基础镜像&#xff0c;当前镜像基于&#xff08;依赖&#xff09;哪个镜像maintainer镜像的维护者和邮箱run镜像构建时需要执行的命令workdir镜像的工作目录expos…