el-date-picker增加默认值 修改样式

预期效果

默认是这样的
在这里插入图片描述

但希望是直接有一个默认的当天日期,并且字体颜色啥的样式也要修改(在这里假设今天是2023/10/6
在这里插入图片描述


功能实现

踩了坑挺多坑的,特此记录
官方文档
按照官方的说明,给v-model绑定一个字符串就可以了
在这里插入图片描述


在js中获取当前时间

利用Date()来返回当天的日期,在传给v-model就可以了

因为第二种选择器有起始和结束日期,要传一个数组(包含2个元素),所以这里先定义2个时间sTime 和 eTime

let isDate = new Date();
//开始时间 start
let sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}`;//结束时间 end
let eTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${ isDate.getDate() + 6}`;//如果你的时间选择器没有精确到时分秒,就只是年月日就结束了,那么00:00:00 23:59:59 就不用加了
sTime = `${sTime} 00:00:00`;
eTime = `${eTime} 23:59:59`;
console.log("sTime", sTime);
console.log("eTime", eTime);
const tt = [sTime, eTime]; 


逐句解释

new Date()返回当前时间
在这里插入图片描述在这里插入图片描述

  • isDate.getFullYear()返回今天的年份
  • isDate.getMonth()返回今天的月份注意是从0开始,所以10月,但返回9,所以记得isDate.getMonth()+1
  • isDate.getDate()返回日期


在template中绑定

   <el-date-pickerv-model="sTime"type="date"value-format="YYYY-MM-DD"format="YYYY/MM/DD"placeholder="请选择收拍日期"></el-date-picker><el-date-pickerv-model="tt"type="daterange"range-separator="-"start-placeholder="开始时间"end-placeholder="结束时间"size="default"popper-class="data-picker"value-format="YYYY-MM-DD"/>


出错:总显示10月1日

但是,并没有显示今天的日期,就很奇怪的显示10/01,但是获取到的sTime和 eTime都是对的

在这里插入图片描述
后来和其他栗子对比,发现正常显示的都是

在这里插入图片描述
也就是,我的日期和月份没有补零,所以才会识别错误,就默认给我绑定1号的日期(我还以为是闹鬼了,没初始化,就自己出现一个10/01



改正:月份和日期自动补零

var date = new Date();
const year = date.getFullYear();
// 注意月份从0开始,要+1
const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 补零,确保两位数
const day = date.getDate().toString().padStart(2, "0"); // 同样补零
let day2 = date.getDate() + 10;
day2 = day2.toString().padStart(2, "0"); // 同样补零// 可以不写时间
const hour = " 00:00:00";
const collectDate1 = `${year}-${month}-${day}${hour}`;
console.log("collectDate1", collectDate1, typeof collectDate1);const collectDate2 = `${year}-${month}-${day2}${hour}`;
console.log("collectDate2", collectDate2, typeof collectDate2);
const obj = [collectDate1, collectDate2];


 <el-date-pickerv-model="collectDate1"type="date"value-format="YYYY-MM-DD"format="YYYY/MM/DD"placeholder="请选择收拍日期"></el-date-picker><el-date-pickerv-model="obj"type="daterange"range-separator="-"start-placeholder="开始时间"end-placeholder="结束时间"size="default"popper-class="data-picker"value-format="YYYY-MM-DD"/>


实现预期效果
在这里插入图片描述



或者日期是规定好的,就直接传字符串也行

const hh = ["2023-06-07", "2023-10-09"];<el-date-pickerv-model="hh"type="daterange"range-separator="-"start-placeholder="开始时间"end-placeholder="结束时间"size="default"popper-class="data-picker"value-format="YYYY-MM-DD"/>

在这里插入图片描述



样式实现

在这里插入图片描述

:deep(.el-date-editor) {width: 300px;height: 60px;border: none;background-color: #e498ce;/* border: 3px solid rgb(47, 162, 24); */
}:deep(.el-input__wrapper) {background-color: #b2ba56;border: 3px solid white;
}
:deep(.el-input) {/* border: 3px solid white; */
}
:deep(.el-icon),
:deep(.el-input__icon) {color: blue;
}
:deep(.el-input__inner) {color: rgb(206, 206, 59);
}

个别样式修改不了,就需要去掉scoped,把样式改成全局的;
还有就是在App.vue或者style中引用
在这里插入图片描述




还有一种错误,就是月份总是02,可现在明明是10月份,就很迷
在这里插入图片描述
对比代码发现,是我大小写错了
在这里插入图片描述


完善

发现上面的虽然可以显示默认,但是在日历中选择后,也不好用了,就好像数据是死的一样,所以响应式,就用ref,并且const变成let

const hh = ref(["2023-06-07", "2023-10-09"]);var date = new Date();
let year = date.getFullYear();
// 注意月份从0开始,要+1
let month = (date.getMonth() + 1).toString().padStart(2, "0"); // 补零,确保两位数
let day = date.getDate().toString().padStart(2, "0"); // 同样补零
let day2 = date.getDate() + 10;
day2 = day2.toString().padStart(2, "0"); // 同样补零// 可以不写时间
let hour = " 00:00:00";
let collectDate1 = ref(`${year}-${month}-${day}${hour}`);
console.log("collectDate1", collectDate1.value, typeof collectDate1.value);let collectDate2 = `${year}-${month}-${day2}${hour}`;
console.log("collectDate2", collectDate2, typeof collectDate2);

在加入watch监听,就可以获取选择后的时间了

watch(() => collectDate1,() => {console.log("watch监听collectDate1", collectDate1.value);},{deep: true,immediate: true,}
);

在这里插入图片描述

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

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

相关文章

阿里云轻量应用服务器月流量限制说明(部分套餐不限流量)

阿里云轻量应用服务器部分套餐限制月流量&#xff0c;轻量应用服务器按照套餐售卖&#xff0c;有的套餐限制月流量&#xff0c;有的不限制流量。像阿里云轻量2核2G3M带宽轻量服务器一年108元和轻量2核4G4M带宽一年297.98元12个月&#xff0c;这两款是不限制月流量的。阿里云百科…

MySQL-锁

MySQL的锁机制 1.共享锁(Shared Lock)和排他锁(Exclusive Lock) 事务不能同时具有行共享锁和排他锁&#xff0c;如果事务想要获取排他锁&#xff0c;前提是行没有共享锁和排他锁。而共享锁&#xff0c;只要行没有排他锁都能获取到。 手动开启共享锁/排他锁&#xff1a; -- 对…

【Linux升级之路】7_进程信号

目录 一、【Linux初阶】信号入门 | 信号基本概念信号产生核心转储二、【Linux初阶】信号入门2 | 信号阻塞、捕捉、保存 一、【Linux初阶】信号入门 | 信号基本概念信号产生核心转储 链接&#xff1a; 【Linux初阶】信号入门 | 信号基本概念信号产生核心转储 二、【Linux初阶】…

数据产品读书笔记——认识数据产品经理

&#x1f33b;大家可能听说的更多是产品经理这个角色&#xff0c;对数据产品经理可能或多或少了解一些&#xff0c;但又不能准确的描述数据产品经理的主要职能和与其他产品的不同&#xff0c;因此通过读一些书来对数据产品经理有一个准确且全面的认知。 目录 1. 数据的产品分类…

linux常见命令以及jdk,tomcat环境搭建

目录 Is pwd cd touch cat echo vim 复制粘贴 mkdir rm cp jdk部署 1. yum list | grep jdk进行查找​编辑 2.安装​编辑 3.再次确认 4.判断是否安装成功 tomcat安装 1.下载压缩包&#xff0c;把压缩包上传至linux(可能需要yum install lrzsz) 2.解压缩unzip 压缩包名&…

基于Springboot实现房屋租赁租房平台系统项目【项目源码+论文说明】

基于Springboot实现房屋租赁租房平台系统演示 摘要 在网络高速发展的时代&#xff0c;众多的软件被开发出来&#xff0c;给用户带来了很大的选择余地&#xff0c;而且人们越来越追求更个性的需求。在这种时代背景下&#xff0c;房东只能以用户为导向&#xff0c;所以开发租房网…

Linux性能优化--性能工具:系统内存

3.0.概述 本章概述了系统级的Linux内存性能工具。本章将讨论这些工具可以测量的内存统计信息&#xff0c;以及如何使用各种工具收集这些统计结果。阅读本章后&#xff0c;你将能够&#xff1a; 理解系统级性能的基本指标&#xff0c;包括内存的使用情况。明白哪些工具可以检索…

Docker linux 安装

sudo yum update sudo yum clean all sudo yum makecache#安装依赖 sudo yum install -y yum-utils device-mapper-persistent-data lvm2 #添加官方存储库 sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo#安装-跳过一些异常依赖…

028.Python面向对象_类补充_元类

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

抽象轻松的java-mybatis简单入门

第一步&#xff1a;用IDEA新建一个java包 第二步&#xff1a;在IDEA中添加数据库&#xff08;ps&#xff1a;自己百度&#xff09; 点击数据库 第二步&#xff0c;新建数据库 选择你使用的数据库 用户与密码根据自己的设置进行配置 为了更方便的查看数据库&#xff0c;可以像图…

如何提升和扩展 PostgreSQL — 从共享缓冲区到内存数据网格

利用共享缓存和操作系统缓存利用 RAM Postgres 是一个基于磁盘的数据库&#xff0c;即使您的整个架构是围绕磁盘访问设计的&#xff0c;利用 RAM 也很重要。如果按照人类规模的延迟来判断&#xff0c;这可以将延迟从几天缩短到几分钟&#xff08;图 1&#xff09;。只需看一下…

onlyoffice历史版本功能实现

一&#xff1a;开启客户端配置 如果不开启&#xff0c;回调请求里面的history和changeUrl是空 二&#xff1a;客户端主要实现2个回调函数 1.实现onRequestHistory事件&#xff0c;该事件会在ui点击查看历史的时候发起,用于展示历史列表 关键在于获取到history的内容&#xff…