ElementUI的DatePicker多个日期选择器默认没有选中样式的问题

在Vue+Element开发中遇到ElementUI的DatePicker多选日期选择器默认未显示选中样式的问题。经过排查,发现原因是默认值与实际0点时间不一致。解决方案是设置默认值为当天的0点时间,如`new Date(new Date().setHours(0,0,0,0))`。官方GitHub已确认此问题并提供了修复方法。" 100856301,4795543,SpringBoot整合MQTT实战:发布者与订阅者,"['SpringBoot框架', 'MQTT协议', '消息发布', '消息订阅', '集成测试']

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景

  在使用vue+element开发的时候由于项目需要,需要使用element日期选择器里面的支持多选以及跳选的日期选择器。
  就是这货:
code:

 <el-date-picker v-model="value13" type="dates">
 </el-date-picker>

日期选择器

  它可以支持跳选,还是一个比较实用的日期选择器:

支持跳选

问题

  在使用过程中发现一个很蛋疼的问题,该

<template> <div class="date-picker-container"> <!-- 左侧日期选择器 --> <el-date-picker v-model="currentDate" type="date" format="yyyy-MM-dd" placeholder="选择日期" @change="handleDateChange"> </el-date-picker> <!-- 右侧星期Tabs --> <el-tabs v-model="activeDay" type="card" @tab-click="handleTabClick"> <el-tab-pane v-for="(day, index) in weekDays" :key="index" :label="day.label" :name="day.value.toString()"> </el-tab-pane> </el-tabs> </div> </template> <script> export default { data() { return { currentDate: new Date(), // 当前选中日期 activeDay: '1', // 当前选中星期(1-7) weekDays: [] // 当前周日期数组 }; }, mounted() { this.updateWeekDays(); }, methods: { // 计算当周日期 (周一到周日) updateWeekDays() { const date = new Date(this.currentDate); const day = date.getDay(); // 0=周日, 1=周一...6=周六 // 获取本周一日期 (当为周日时特殊处理) const monday = new Date(date); monday.setDate(date.getDate() - (day === 0 ? 6 : day - 1)); // 生成周一到周日数据 this.weekDays = Array.from({ length: 7 }).map((_, i) => { const d = new Date(monday); d.setDate(monday.getDate() + i); return { value: i + 1, // 星期索引 (1-7) date: d, // 实际日期对象 label: `周${['一','二','三','四','五','六','日'][i]}` }; }); // 更新当前选中星期 this.activeDay = (day === 0 ? 7 : day).toString(); }, // 左侧日期选择器变化 handleDateChange(date) { this.currentDate = date; this.updateWeekDays(); // 更新右侧Tab }, // 右侧Tab点击 handleTabClick(tab) { const dayIndex = Number(tab.name) - 1; // 更新当前日期为对应星期日期 this.currentDate = this.weekDays[dayIndex].date; } } }; </script> <style lang="scss"> .date-picker-container { display: flex; gap: 20px; .el-tabs { flex: 1; .el-tabs__item { padding: 0 15px; height: 32px; line-height: 32px; } } } </style> 完善代码,最大日期选择为2099年12月31日,当日期选择范围在2099年最后一周是,不可选择的日期与tab同步为disbled状态
最新发布
06-18
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值