当前位置:   article > 正文

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

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]; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13


逐句解释

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"
    />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18


出错:总显示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];
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16


 <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"
    />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18


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



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

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"
    />
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述



样式实现

在这里插入图片描述

: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);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24

个别样式修改不了,就需要去掉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);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

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

watch(
  () => collectDate1,
  () => {
    console.log("watch监听collectDate1", collectDate1.value);
  },
  {
    deep: true,
    immediate: true,
  }
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在这里插入图片描述

本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
相关标签
  

闽ICP备14008679号