vue3 element-plus 日期选择器 el-date-picker 汉化

vue3 项目中,element-plus 的日期选择器 el-date-picker 默认是英文版的,如下:
在这里插入图片描述

页面引入:

//引入汉化语言包
import locale from "element-plus/lib/locale/lang/zh-cn"
import { ElDatePicker, ElButton, ElConfigProvider } from 'element-plus/lib/components'

el-config-provider 包裹组件 el-date-picker

<el-config-provider :locale="locale"><el-date-picker v-model="searchList.end_time" type="date" placeholder="请选择结束时间" value-format="yyyy-mm-dd"/>
</el-config-provider>

完整代码,index.tsx

import { defineComponent, ref, reactive, onMounted } from 'vue'
import styled from '@/styled-components'
import { Popover } from 'ant-design-vue';
//引入汉化语言包
import locale from "element-plus/lib/locale/lang/zh-cn"
import { ElDatePicker, ElButton, ElConfigProvider } from 'element-plus/lib/components'const BgContainer = styled.div`display: flex;flex-direction: column;width: 100%;height: 100%;background-color: rgb(246, 246, 246);
`export default defineComponent({setup() {const selectedDateVal = ref<number>(0)const timeArr = ref<number[]>([])const searchForm = reactive({timeType: 'yesterday',beginTime: 0,endTime: 0})onMounted(() => {})function setCustomTime(val:string){  searchForm.timeType = val    }function confirmDateTime(val:any,type:string){      if(val){ let beginTime = 0   let endTime = 0const date = new Date(val)switch (type) {case 'yesterday':                            beginTime = val     endTime = val + 60 * 60 * 1000 * 24-1000 breakcase 'week':                            beginTime = val      endTime = beginTime+7*60*60*1000*24-1000 breakcase 'month': beginTime = valendTime = new Date(new Date(date.getFullYear(), date.getMonth()+1, 1).setDate(0)).getTime() // 获取所选月最后一天                        break}timeArr.value = [beginTime, endTime]selectedDateVal.value = 0       searchForm.timeType = type}     }return () => {return (<BgContainer>      <ElConfigProvider locale={locale}><Popover content={<ElDatePicker onChange={(val:any)=>confirmDateTime(val,'yesterday')} type='datetime' v-model={selectedDateVal.value} format="YYYY-MM-DD HH:mm:ss" value-format="x" placeholder="请选择指定日"></ElDatePicker>} title="选择指定日"><ElButton type="primary" onClick={() =>setCustomTime('yesterday')}>指定日</ElButton></Popover>      </ElConfigProvider>            </BgContainer>)}}
})

页面效果如下所示:
在这里插入图片描述

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

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

相关文章

西南科技大学数据库实验二(表数据插入、修改和删除)

一、实验目的 &#xff08;1&#xff09;学会用SQL语句对数据库进行插入、修改和删除数据操作 &#xff08;2&#xff09;掌握insert、update、delete命令实现对表数据插入、修改和删除等更新操作。 二、实验任务 创建数据库&#xff0c;并创建Employees表、Departments表和…

Python学习笔记第七十五天(OpenCV图像应用)

Python学习笔记第七十五天 OpenCV图像应用读取图片显示图像写入图像保存图像 后记 OpenCV图像应用 读取图片 使用OpenCV读取图片非常简单&#xff0c;可以使用cv2.imread()函数。该函数接受两个参数&#xff1a;图像路径和标志。标志指定了读取图像的方式&#xff0c;包括是否…

MySQL5.x和8.0

区别1. 性能&#xff1a;MySQL 8.0 的速度要比 MySQL 5.7 快 2 倍 MySQL 8.0 在以下方面带来了更好的性能&#xff1a;读/写工作负载、IO 密集型工作负载、以及高竞争&#xff08;"hot spot"热点竞争问题&#xff09;工作负载2. NoSQL&#xff1a;MySQL 从 5.7 版本开…

微服务网关Gateway

springcloud官方提供的网关组件spring-cloud-starter-gateway,看pom.xml文件,引入了webflux做响应式编程,请求转发用到了netty的reactor模型,支持的请求数在1W~1.5W左右。hystrix停止维护后,官方推荐resilience4j做服务熔断,网关这里也能看到依赖。 对于网关提供的功能…

什么是CI/CD?如何在PHP项目中实施CI/CD?

CI/CD&#xff08;持续集成/持续交付或持续部署&#xff09;是一种软件开发和交付方法&#xff0c;它旨在通过自动化和持续集成来提高开发速度和交付质量。以下是CI/CD的基本概念和如何在PHP项目中实施它的一般步骤&#xff1a; 持续集成&#xff08;Continuous Integration -…

Unity 使用AddTorque方法给刚体施加力矩详解

给刚体施加力&#xff0c;除了使用AddForce方法&#xff0c;我们还可以使用AddTorque方法。该方法是通过施加力矩给刚体以力。AddTorque方法从形式上跟AddForce差不多&#xff0c;它也有4个重载方法&#xff1a; 1、AddTorque(Vector3 torque)&#xff1b;使用Vector3类型参数…

YOLO v8 目标检测识别翻栏

一、行人翻栏识别背景介绍 1.1跨越围栏是人类活动中一个普遍但需要引起警惕的行为。它不仅可能导致各种意外事故&#xff0c;甚至可能对个人的生命安全构成威胁。在交通领域&#xff0c;跨越围栏可能导致严重的交通事故&#xff0c;造成人员伤亡。在公共场所&#xff0c;如公园…

华为、新华三、锐捷常用命令总结

华为、新华三、锐捷常用命令总结 一、华为交换机基础配置命令二、H3C交换机的基本配置三、锐捷交换机基础命令配置 一、华为交换机基础配置命令 1、创建vlan&#xff1a; <Quidway> //用户视图&#xff0c;也就是在Quidway模式下运行命令。 <Quidway>system-view…

B+树和索引

B树概念 是一种平衡多路搜索树&#xff08;Balanced Multiway Search Tree&#xff09;&#xff0c;常用于数据库和文件系统的索引结构。相比于其他的树型数据结构&#xff0c;如二叉搜索树和B树&#xff0c;B树在大数据量下的性能表现更优秀。 B树的基本特性&#xff1a; 多…

Ansible如何处理play错误的?Ansible角色?

Ansible如何处理play错误的&#xff1a;Ansible审查每个任务的返回代码&#xff0c;以确定任务是否成功或失败。默认情况下&#xff0c;当一个任务失败时&#xff0c;Ansible会立即中止该主机上的其他操作&#xff0c;并跳过所有后续任务。 实际生产中&#xff0c;若希望即使任…

在Node.js中MongoDB查询分页的方法

本文主要介绍在Node.js中MongoDB查询分页的方法。 目录 Node.js中MongoDB查询分页使用原生的mongodb驱动程序查询分页使用Mongoose库进行查询分页注意项 Node.js中MongoDB查询分页 在Node.js中使用MongoDB进行查询分页&#xff0c;可以使用原生的mongodb驱动程序或者Mongoose库…

【web安全】密码爆破讲解,以及burp的爆破功能使用方法

前言 菜某总结&#xff0c;欢迎指正错误进行补充 密码暴力破解原理 暴力破解实际就是疯狂的输入密码进行尝试登录&#xff0c;针对有的人喜欢用一些个人信息当做密码&#xff0c;有的人喜欢用一些很简单的低强度密码&#xff0c;我们就可以针对性的生成一个字典&#xff0c;…

【Linux】文件系统、文件系统结构、虚拟文件系统

一、文件系统概述 1. 什么是文件系统&#xff1f;2. 文件系统&#xff08;文件管理系统的方法&#xff09;的种类有哪些&#xff1f;3. 什么是分区&#xff1f;4. 什么是文件系统目录结构&#xff1f;5. 什么虚拟文件系统Virtual File System &#xff1f;6. 虚拟文件系统有什…

【华为数据之道学习笔记】5-6非结构化数据入湖

1. 非结构化数据管理的范围 非结构化数据包括无格式的文本、各类格式的文档、图像、音频、视频等多样异构的格式文件。相较于结构化数据&#xff0c;非结构化数据更难以标准化和理解&#xff0c;因而非结构化数据的管理不仅包括文件本身&#xff0c;而且包括对文件的描述属性&a…

OpenAI开源超级对齐方法:用GPT-2,监督、微调GPT-4

12月15日&#xff0c;OpenAI在官网公布了最新研究论文和开源项目——如何用小模型监督大模型&#xff0c;实现更好的新型对齐方法。 目前&#xff0c;大模型的主流对齐方法是RLHF&#xff08;人类反馈强化学习&#xff09;。但随着大模型朝着多模态、AGI发展&#xff0c;神经元…

Julia调用Matlab, Python以及R的微分方程求解器

文章目录 从其他语言翻译来的求解器重新封装版本 SciML教程系列&#xff1a; Julia求解常微分方程解Lorentz方程求解简谐振动的微分方程求解单摆 从其他语言翻译来的求解器 对于熟悉MATLAB/Python/R的程序员&#xff0c;可先使用下表中的求解器&#xff0c;因为这些求解器是…

Spring Boot SOAP Web 服务端和客户端

一. 服务端 1. 技术栈 JDK 1.8&#xff0c;Eclipse&#xff0c;Maven – 开发环境SpringBoot – 基础应用程序框架wsdl4j – 为我们的服务发布 WSDLSOAP-UI – 用于测试我们的服务JAXB maven 插件 – 用于代码生成 2.创建 Spring Boot 项目 添加 Wsdl4j 依赖关系 编辑pom…

小程序分享图片(JAVA+小程序端)

第一次做小程序海报分享&#xff0c;感觉canvas还是有点难度的。 所以用了JAVA后端生成&#xff0c;JAVA用了 ImageCombiner 组件去开发&#xff0c;整体来说感觉还是便捷很多的。 <dependency><groupId>com.freewayso</groupId><artifactId>image-c…

cesium 自定义贴图,shadertoy移植教程。

1.前言 cesium中提供了一些高级的api&#xff0c;可以自己写一些shader来制作炫酷的效果。 ShaderToy 是一个可以在线编写、测试和分享图形渲染着色器的网站。它提供了一个图形化的编辑器&#xff0c;可以让用户编写基于 WebGL 的 GLSL 着色器代码&#xff0c;并实时预览渲染结…

006 Windows共享

一、共享要求 一般是局域网内使用 1、物理上处于统一局域网 同一公司的网络同一家庭的网络连接同一手机热点的主机 2、逻辑上处于同一局域网 直接可以ping对方主机&#xff08;能够直接访问到&#xff09; 二、共享权限 1、共享权限 一般设置为everyone完全控制 2、NTF…