产品展示型网站,什么平台,wordpress 404判断,东莞企业网站推广预期效果
默认是这样的
但希望是直接有一个默认的当天日期#xff0c;并且字体颜色啥的样式也要修改#xff08;在这里假设今天是2023/10/6
功能实现
踩了坑挺多坑的#xff0c;特此记录 官方文档 按照官方的说明#xff0c;给v-model绑定一个字符串就可以了
在j…预期效果
默认是这样的
但希望是直接有一个默认的当天日期并且字体颜色啥的样式也要修改在这里假设今天是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()1isDate.getDate()返回日期 在template中绑定 el-date-pickerv-modelsTimetypedatevalue-formatYYYY-MM-DDformatYYYY/MM/DDplaceholder请选择收拍日期/el-date-pickerel-date-pickerv-modeltttypedaterangerange-separator-start-placeholder开始时间end-placeholder结束时间sizedefaultpopper-classdata-pickervalue-formatYYYY-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-modelcollectDate1typedatevalue-formatYYYY-MM-DDformatYYYY/MM/DDplaceholder请选择收拍日期/el-date-pickerel-date-pickerv-modelobjtypedaterangerange-separator-start-placeholder开始时间end-placeholder结束时间sizedefaultpopper-classdata-pickervalue-formatYYYY-MM-DD/实现预期效果
或者日期是规定好的就直接传字符串也行
const hh [2023-06-07, 2023-10-09];el-date-pickerv-modelhhtypedaterangerange-separator-start-placeholder开始时间end-placeholder结束时间sizedefaultpopper-classdata-pickervalue-formatYYYY-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,}
);
