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

预期效果

默认是这样的

但希望是直接有一个默认的当天日期，并且字体颜色啥的样式也要修改（在这里假设今天是2023/10/6

功能实现

踩了坑挺多坑的，特此记录
官方文档
按照官方的说明，给v-model绑定一个字符串就可以了

在js中获取当前时间

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

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

let isDate = new Date();//开始时间 startlet sTime = `${isDate.getFullYear()}-${isDate.getMonth() + 1}-${isDate.getDate()}`;//结束时间 endlet 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-picker      v-model="sTime"      type="date"      value-fORMat="YYYY-MM-DD"      format="YYYY/MM/DD"      placeholder="请选择收拍日期"    >    </el-date-picker>    <el-date-picker      v-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开始，要+1const 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-picker      v-model="collectDate1"      type="date"      value-format="YYYY-MM-DD"      format="YYYY/MM/DD"      placeholder="请选择收拍日期"    >    </el-date-picker>    <el-date-picker      v-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-picker      v-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;  }:deep(.el-input__wrapper) {  background-color: #b2ba56;  border: 3px solid white;}:deep(.el-input) {  }: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开始，要+1let 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,  });

来源地址：https://blog.csdn.net/weixin_63681863/article/details/133604615