element-plus里el-date-picker日期选择器,默认值不显示的问题

官网文档给出的示例默认值也是没有没显示的。
在这里插入图片描述
找了很多方法,最终是给v-model="defaultTime"绑定初始值,如下代码,需要的可以改一下

<el-date-picker class="top_select" v-model="defaultTime" type="daterange" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :shortcuts="shortcuts" style="margin-right: 16px" :default-time="defaultTime" @change="timeChange" />
// 获取当前日期时间对象
const currentDate = new Date();
const currentYear = currentDate.getFullYear();
const currentMonth = currentDate.getMonth();
const currentDay = currentDate.getDate();const defaultTime = ref<[Date, Date]>([new Date(currentYear, 0, 1, 0, 0, 0), new Date(currentYear, currentMonth, currentDay, 23, 59, 59)]);// 但是拿到的时间需要处理成自己想要的数据 这个是我想要的年月日时分秒
const formatDate = (date: any) => {var year = date.getFullYear();var month = ("0" + (date.getMonth() + 1)).slice(-2);var day = ("0" + date.getDate()).slice(-2);var hours = ("0" + date.getHours()).slice(-2);var minutes = ("0" + date.getMinutes()).slice(-2);var seconds = ("0" + date.getSeconds()).slice(-2);return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
}const formatDateStartDateTime = formatDate(new Date(defaultTime.value[0].toLocaleString()));
const formatDateEndDateTime = formatDate(new Date(defaultTime.value[1].toLocaleString()));console.log(formatDateStartDateTime, formatDateEndDateTime);

希望可以帮助到大家。
最终效果如下
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

解决:接口中返回的文本不能保持原本格式也无法换行

一、问题&#xff1a; 原本传入的文本是有换行的&#xff0c;但是用div展示接口返回的文本&#xff0c;所示内容没有保持原有格式没达到换行效果 以下是传入到接口的文本格式 使用div标签展示接口返回的文本&#xff0c;但并没有保持原有格式&#xff0c;文本也没换行 <di…

做科技类的展台3d模型用什么材质比较好---模大狮模型网

对于科技类展台3D模型&#xff0c;以下是几种常用的材质选择&#xff1a; 金属材质&#xff1a;金属材质常用于科技展台的现代感设计&#xff0c;如不锈钢、铝合金或镀铬材质。金属材质可以赋予展台一个科技感和高档感&#xff0c;同时还可以反射光线&#xff0c;增加模型的真实…

批量多目录将任意文件转为base64的效率工具

本篇文章主要介绍一款编程工作中日常会使用到的批量多目录将任意文件转为base64的效率工具&#xff0c;他能够帮助你快速将任何格式的文件base64化&#xff0c;并转为json、xml、yaml等数据格式使用。 日期&#xff1a;2024年1月10日 获取地址&#xff1a;https://download.csd…

训练自己的GPT2

训练自己的GPT2 1.预训练与微调2.准备工作2.在自己的数据上进行微调 1.预训练与微调 所谓的预训练&#xff0c;就是在海量的通用数据上训练大模型。比如&#xff0c;我把全世界所有的网页上的文本内容都整理出来&#xff0c;把全人类所有的书籍、论文都整理出来&#xff0c;然…

刷题第十五天-存在重复元素Ⅲ

存在重复元素Ⅲ 题目要求 解题思路 主要使用滑动窗口方法&#xff0c;让滑动窗口代销固定为t。 本题最大的难点在于快速地找到滑动窗口内的最大值和最小值&#xff0c;以及删除指定元素。 如果遍历求滑动窗口内的最大值和最小值&#xff0c;时间复杂度是O&#xff08;K&#…

Linux(上篇)

计算机硬件软体系 顺序执行程序 计算机硬件由运算器&#xff0c;控制器&#xff0c;存储器&#xff0c;输入设备&#xff0c;输出设备五大部分组成 计算机硬件组成 输入设备 用来将人们熟悉的信息形式转换为机器能够识别的信息形式。 输出设备 将机器运算的结果装换为人…

redis的使用、打开、关闭的详细介绍

redis的使用、打开、关闭的详细介绍 1.安装redis cd / cd opt/ wget https://download.redis.io/releases/redis-5.0.5.tar.gz 2.解压redis tar xzf redis-5.0.5.tar.gz 3.执行make cd redis-5.0.5/ make 如果出现找不到make的情况就yum install -y make 如果没有gcc就…

【BIAI】Lecture 7 - EEG data analysis

EEG data analysis 专业术语 EEG 脑电图 excitatory postsynaptic potential(EPSP)兴奋性突触后电位 inhibitory postsynaptic potential(IPSP) 抑制性突触后电位 action potential 动作电位 dipoles 偶极子 Pyramidal neurons 椎体细胞 Axon 轴突 Dendrite 树突 Synapse 突触…

【大数据架构】OLAP实时分析引擎选型

OLAP引擎面临的挑战 常见OLAP引擎对比 OLAP分析场景中&#xff0c;一般认为QPS达到1000就算高并发&#xff0c;而不是像电商、抢红包等业务场景中&#xff0c;10W以上才算高并发&#xff0c;毕竟数据分析场景&#xff0c;数据海量&#xff0c;计算复杂&#xff0c;QPS能够达到1…

慕课热搜01

uniapp过滤器使用 创建一个过滤器&#xff1a; 在入口函数注册过滤器 // 注册过滤器 import * as filters from "./filters/index.js"Object.keys(filters).forEach(key>{Vue.filter(key,filters[key]) })使用过滤器&#xff1a; onPageScroll , uniapp监听滚动…

Edge无法卸载也无法上网的处理

1、在C盘把Microsoft下的子文件删掉&#xff0c;注意最好用delete删&#xff0c;别右键删&#xff01; 2、删掉用户文件夹下\AppData\Local\Microsoft\Edge\User Data下的所有文件 3、到微软官网下载最新的edge&#xff0c;再安装就可以了: https://www.microsoft.com/zh-cn…

FlinkAPI开发之数据合流

案例用到的测试数据请参考文章&#xff1a; Flink自定义Source模拟数据流 原文链接&#xff1a;https://blog.csdn.net/m0_52606060/article/details/135436048 概述 在实际应用中&#xff0c;我们经常会遇到来源不同的多条流&#xff0c;需要将它们的数据进行联合处理。所以…

【GDAL】Windows下VS+GDAL开发环境搭建

Step.0 环境说明&#xff08;vs版本&#xff0c;CMake版本&#xff09; 本地的IDE环境是vs2022&#xff0c;安装的CMake版本是3.25.1。 Step.1 下载GDAL和依赖的组件 编译gdal之前需要安装gdal依赖的组件&#xff0c;gdal所依赖的组件可以在官网文档找到&#xff0c;可以根据…

中文语音识别转文字的王者,阿里达摩院FunAsr足可与Whisper相颉顽

君不言语音识别技术则已&#xff0c;言则必称Whisper&#xff0c;没错&#xff0c;OpenAi开源的Whisper确实是世界主流语音识别技术的魁首&#xff0c;但在中文领域&#xff0c;有一个足以和Whisper相颉顽的项目&#xff0c;那就是阿里达摩院自研的FunAsr。 FunAsr主要依托达摩…

截图识别文字怎么弄?分享3个工具!

随着科技的不断发展&#xff0c;我们的生活和工作中需要处理越来越多的数字信息。有时候&#xff0c;我们需要从图片或者截图中提取文字&#xff0c;例如整理资料、处理图片注释等等。这时&#xff0c;一款好用的截图识别文字工具就显得尤为重要。今天&#xff0c;就让我们来聊…

浏览器不支持 css 中 :not 表达式的解决方法

问题 使用 :not 表达式的样式在不同浏览器中存在不生效的问题。 原因 不生效是因为浏览器版本较低所导致的。&#xff08;更多详细信息请看&#xff1a;MDN&#xff09; 解决方法 初始写法&#xff1a; .input-group:not(.user-name, .user-passwork){width: auto; }改成…

常见Mysql数据库操作语句

-- DDL创建数据库结构 -- 查询所有数据库 show databases ; -- 修改数据库字符集 alter database db02 charset utf8mb4; -- 创建字符编码为utf——8的数据库 create database db05 DEFAULT CHARACTER SET utf8;-- 创建表格 create table tb_user(id int auto_increment primar…

搜维尔科技:【简报】元宇宙数字人赛道,2022年金奖《金魚姬》赏析!

一名网络直播主名叫琉璃&#xff0c;在即将展开她日常进行的每日准时直播前&#xff0c;肚子极为不舒服&#xff0c;突然很想上厕所&#xff0c;由于时间紧迫&#xff0c;导致琉璃需要在厕所里面完成直播&#xff01;为了掩饰自己所在的处境&#xff0c;她决定运用自己设计的虚…

85.乐理基础-记号篇-力度记号

内容来源于&#xff1a;三分钟音乐社 上一个内容&#xff1a;78.乐理基础-非常见拍号如何打拍子-CSDN博客 85-78之间的内容观看索引&#xff1a; 腾讯课堂-三分钟音乐社-打拍子&#xff08;20&#xff09;-总结、重点、练习与检验方法开始看 力度记号&#xff1a;p、f、mp、…

基于SpringBoot的精品在线试题库系统(系统+数据库+文档)

&#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目 希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;一、绪论 1. 研究背景 现在大家…