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表和…

微服务网关Gateway

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

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

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

在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. 虚拟文件系统有什…

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

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

Spring Boot SOAP Web 服务端和客户端

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

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

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

006 Windows共享

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

基于3D-CGAN的跨模态MR脑肿瘤分割图像合成

3D CGAN BASED CROSS-MODALITY MR IMAGE SYNTHESIS FOR BRAIN TUMOR SEGMENTATION 基于3D-CGAN的跨模态MR脑肿瘤分割图像合成背景贡献实验方法Subject-specific local adaptive fusion&#xff08;针对特定主题的局部自适应融合&#xff09;Brain tumor segmentation model 损失…

K8s投射数据卷

目录 一.Secret 1.secret介绍 2.secret的类型 3.创建secret 4.使用secret 环境变量的形式 volume数据卷挂载 二ConfigMap 1.创建ConfigMap的方式 2.使用ConfigMap 2.1作为volume挂载使用 2.2.作为环境变量 三.Downward API 1.以环境变量的方式实现 2.Volume挂载 一.S…

深入解析 Spring 和 Spring Boot 的区别

目录 引言 1. 设计理念 1.1 Spring 框架的设计理念 1.2 Spring Boot 的设计理念 2. 项目配置 2.1 Spring 框架的项目配置 2.2 Spring Boot 的项目配置 3. 自动配置 3.1 Spring 框架的自动配置 3.2 Spring Boot 的自动配置 4. 微服务支持 4.1 Spring 框架的微服务支持…

OceanBase 4.2.1社区版 最小资源需求安装方式

OceanBase 4.2.1社区版 最小资源需求安装方式 资源需求 资源需求分析 observer Memory 控制参数&#xff1a; memory_limit_percentage 默认80% memory_limit 直接设定observer Memory 大小 System memory 可设为1G 租户内存:sys租户内存设为1G&#xff0c;OCP需要的租户oc…

在Windows上通过cmake-gui及VS2019来 编译OpenCV-4.5.3源码

文章目录 下载OpenCV-4.5.3源码下载opencv_contrib-4.5.3源码打开cmake-gui选择生成器 通过 Visual Studio 2019 打开构建好的.sln工程文件执行编译操作执行安装操作 下载OpenCV-4.5.3源码 可通过github上下载&#xff0c;网上很多&#xff0c;找到tag标签&#xff0c;选择 Op…

OSG中几何体的绘制(二)

5. 几何体操作 在本章的前言中就讲到&#xff0c;场景都是由基本的绘图基元构成的&#xff0c;基本的绘图基元构成简单的几何体,简单的几何体构成复杂的几何体&#xff0c;复杂的几何体最终构造成复杂的场景。当多个几何体组合时&#xff0c;可能存在多种降低场景渲染效率的原因…

AlexNet(pytorch)

AlexNet是2012年ISLVRC 2012&#xff08;ImageNet Large Scale Visual Recognition Challenge&#xff09;竞赛的冠军网络&#xff0c;分类准确率由传统的 70%提升到 80% 该网络的亮点在于&#xff1a; &#xff08;1&#xff09;首次利用 GPU 进行网络加速训练。 &#xff…

Idea中操作Git使用cherry pick

Idea中操作Git使用cherry pick 使用场景使用功能步骤 使用场景 代码开发中,新功能还未开发完,但是master分支需要使用带新功能中的一次提交的代码,就可以使用cherry pack(优选). 使用功能步骤 切换到master分支选中dev分支双击选择需要使用的提交右键,如果有冲突就会弹窗解…

Netty—NIO万字详解

文章目录 NIO基本介绍同步、异步、阻塞、非阻塞IO的分类NIO 和 BIO 的比较NIO 三大核心原理示意图NIO的多路复用说明 核心一&#xff1a;缓存区 (Buffer)Buffer类及其子类Buffer缓冲区的分类MappedByteBuffer类说明&#xff1a; 核心二&#xff1a;通道 (Channel)Channel类及其…

防止反编译,保护你的SpringBoot项目

ClassFinal-maven-plugin插件是一个用于加密Java字节码的工具&#xff0c;它能够保护你的Spring Boot项目中的源代码和配置文件不被非法获取或篡改。下面是如何使用这个插件来加密test.jar包的详细步骤&#xff1a; 安装并设置Maven&#xff1a; 首先确保你已经在你的开发环境中…