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

news2024/12/21 23:48:47

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 = 0
        const date = new Date(val)
        switch (type) {
          case 'yesterday':                            
            beginTime = val     
            endTime = val + 60 * 60 * 1000 * 24-1000 
            break
          case 'week':                            
            beginTime = val      
            endTime = beginTime+7*60*60*1000*24-1000 
            break
          case 'month': 
            beginTime = val
            endTime = 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.coloradmin.cn/o/1303529.html

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

相关文章

【Docker】使用docker-compose搭建django+vue工程文章

我们尝试使用docker-compose编排一个后端基于django,前端基于vue,数据库为postgresql并使用nginx进行反向代理的web工程。 工程准备 Docker 安装Docker 安装docker-compose django 在python3.7的环境下创建 修改settings.py文件 修改 将静态文件收集路径添加进 ,笔…

视频监控管理平台/智能监测/检测系统EasyCVR协议播放限制时长无效是什么原因?

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等。平台既具备传统安…

福德植保无人机:绿色农业的新篇章

今天&#xff0c;我们荣幸地向您介绍福德植保无人机&#xff0c;一种改变传统农业种植方式&#xff0c;引领绿色农业的新科技产品。福德植保无人机以其高效、环保、安全的特点&#xff0c;正逐渐成为植保行业的新宠。福德植保无人机是一种搭载了高性能发动机和精确喷洒系统的飞…

使用Mockjs模拟(假数据)接口(axios)

一、什么是MockJs Mock.js官网 Mock.wiki.git mock测试就是在测试过程中&#xff0c;对于某些不容易构造或者不容易获取的对象&#xff0c;用一个虚拟的对象来创建以便测试的测试方法。 二、安装mockjs npm install mockjs 三、 MockJs使用 简单使用&#xff1a; // 使用…

Java SPI机制学习

最近阅读源码时看到了SPI加载类的方式 这里学习一下 SPI Service Provider Interface 服务提供接口 API和SPI区别 API是接口和实现类均有服务提供方负责 服务调用方更多是一种主动调用 只是调用SDK来实现某个功能&#xff1b;接口的归属权在于服务提供方 SPI是接口在调用方…

【UE5】监控摄像头效果(下)

目录 效果 步骤 一、多摄像机视角切换 二、摄像头自动旋转巡视 三、摄像头跟踪拍摄 效果 步骤 一、多摄像机视角切换 1. 打开玩家控制器“MyPlayerController”&#xff0c;添加一个变量&#xff0c;命名为“BP_SecurityCameraArray”&#xff0c;类型为“BP_SecurityCa…

【JVM从入门到实战】(二)字节码文件的组成

一、Java虚拟机的组成 二、字节码文件的组成 字节码文件的组成 – 应用场景 字节码文件的组成部分-Magic魔数 什么是魔数&#xff1f; Java字节码文件中的魔数 文件是无法通过文件扩展名来确定文件类型的&#xff0c;文件扩展名可以随意修改&#xff0c;不影响文件的内容。…

新能源汽车生产污废水需要哪些工艺及设备

新能源汽车的快速发展带来了许多环境问题&#xff0c;其中之一就是生产过程中产生的污废水。由于新能源汽车的生产过程与传统汽车有所不同&#xff0c;因此需要采用特定的工艺和设备来处理和处理这些废水。 首先&#xff0c;新能源汽车生产过程中产生的污废水主要来自洗涤和冷却…

[排序篇] 冒泡排序

目录 一、概念 二、冒泡排序 2.1 冒泡降序(从大到小排序) 2.2 冒泡升序(从小到大排序) 三、冒泡排序应用 总结 一、概念 冒泡排序核心思想&#xff1a;每次比较两个相邻的元素&#xff0c;如果它们不符合排序规则&#xff08;升序或降序&#xff09;则把它们交换过来。…

.NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(准备篇)

WebAppDbTest 项目准备 项目准备1、.net cli 创建项目2、nuget 包引用和项目结构2.1、项目添加相关 nuget 包2.2、WebAppDbTest 项目结构 3、项目代码说明3.1、CSharp/C# 类文件说明3.2、json 配置文件说明 4、项目运行预览 数据库 .db 文件准备1、创建 SQLite 数据库1.1、在 W…

赛宁网安多领域亮相第三届网络空间内生安全发展大会

2023年12月8日&#xff0c;第三届网络空间内生安全发展大会在宁开幕。两院院士、杰出专家学者和知名企业家相聚南京&#xff0c;围绕数字经济新生态、网络安全新范式进行广泛研讨&#xff0c;为筑牢数字安全底座贡献智慧和力量。 大会围绕“一会、一赛、一展”举办了丰富多彩的…

【华为数据之道学习笔记】3-11元数据管理

1. 产生元数据 &#xff08;1&#xff09;明确业务元数据、技术元数据和操作元数据之间的关系&#xff0c;定义华为公司元数据模型。 &#xff08;2&#xff09;针对找数据及获取数据难的痛点&#xff0c;明确业务元数据、技术元数据、操作元数据的设计原则。 1&#xff09;业务…

虚拟化逻辑架构:KVM虚拟机通过OVS端口组实现网络连接

目录 一、实验 1.CentOS 7 安装 OpenVSwitch(构建RPM安装包&#xff09; 2.KVM虚拟机通过OVS端口组实现网络连接 二、问题 1.安装openvswitch-2.5.10报错 2.virt-install未找到命令 3.如何删除自定义网络 一、实验 1.CentOS 7 安装 OpenVSwitch(构建RPM安装包&#xff…

蓝桥杯周赛 第 1 场 强者挑战赛 6. 小球碰撞【算法赛】(思维题/最长上升子序列LIS)

题目 https://www.lanqiao.cn/problems/9494/learning/?contest_id153 思路来源 Aging代码 题解 二分时间t&#xff0c;第i个小球对应一个起点pi、终点pit*vi的区间&#xff0c;问题转化为&#xff0c; 选最多的区间&#xff0c;使得不存在区间包含&#xff08;即li<l…

不同路径dp问题

1.状态表示 2.状态转移方程 3.初始化 4.填表顺序 从上往下填写每一行 每一行从左往右 5.返回值 dp[m][n] ------------------------------------------------------------------------------------------------------------------------------ 1.状态表示 2.状态转移方程 3…

每日一题,头歌平台c语言题目

任务描述 题目描述:输入一个字符串&#xff0c;输出反序后的字符串。 相关知识&#xff08;略&#xff09; 编程要求 请仔细阅读右侧代码&#xff0c;结合相关知识&#xff0c;在Begin-End区域内进行代码补充。 输入 一行字符 输出 逆序后的字符串 测试说明 样例输入&…

DevOps:自动化、持续交付和持续集成实践

DevOps&#xff1a;自动化、持续交付和持续集成实践 一、DevOps 简介1.1 DevOps 模式定义1.2 DevOps 的工作原理1.3 DevOps 的优势1.4 DevOps 的意义1.5 DevOps 最佳实践 二、持续集成简介2.1 持续集成的意义2.2 持续集成的工作原理2.3 持续集成的优势 三、持续交付简介3.1 持续…

解决夜神模拟器与Android studio自动断开的问题

原因&#xff1a;夜神模拟器的adb版本和Android sdk的adb版本不一致 解决办法&#xff1a; 1.找到android的sdk &#xff08;1&#xff09;File--->Project Structure (2)SDK Location:记下sdk的位置 2.找到sdk中的adb文件 SDK-->platform-tools-->adb.exe 3.复制…

单片机(STM32,GD32,NXP等)中BootLoader的严谨实现详解

Bootloader(引导加载程序)的主要任务是引导加载并运行应用程序&#xff0c;我们的软件升级逻辑也一般在BootLoader中实现。本文将详细介绍BootLoader在单片机中的实现&#xff0c;包括STM32、GD32、NXP Kinetis等等的所有单片机&#xff0c;因为无论是什么样的芯片&#xff0c;…

大模型应用_ChatGPT-Next-Web

1 用后感 这个工具&#xff0c;我也是用了好长时间&#xff0c;就是感觉如果不点亮一颗星&#xff0c;自己就不是人了的那种。 一开始在国内用 ChatGPT 非常麻烦&#xff0c;就买了一个套壳的服务&#xff0c;他使用的界面就是 ChatGPT-Next-Web&#xff0c;我和朋友们都觉得这…