a-calendar 日历组件选择一周

wms_swag

已于 2024-04-28 10:12:48 修改

阅读量219

点赞数 2

文章标签：前端 anti-design-vue

于 2024-04-26 19:03:27 首次发布

本文链接：https://blog.csdn.net/wms_swag/article/details/138227120

版权

方法：先获取日历每个节点的标签，通过判断title属性是否在选择的周内，如果是则把一周的标签父级加上选中周类名，其他移除

效果如图：
在这里插入图片描述

类名参考日期选择框周组件

<a-calendar 
	v-model:value="month" 
	@select="onPanelSelect" 
	@panelChange="panelChange" 
	valueFormat="YYYY-MM-DD" 
	:fullscreen="false"
/>

  // 点击选择日期回调
  const onPanelSelect = (date)=>{
    let list = getWeekNumber.getDayWeekRange(date,'YYYY-MM-DD')
    // 通过判断标签属性title是否在 当周内，是则加上被选中类名
    nextTick(()=>{
      let elements = document.querySelectorAll(".ant-picker-cell");  
      elements.forEach(element=>{
        let customAttr = element.getAttribute("title"); 
        if(list.find(item=> item==customAttr )) {
          element.parentNode.classList.add("ant-picker-week-panel-row-selected");
        }else{
          element.parentNode.classList.remove("ant-picker-week-panel-row-selected");
        }
      })
      loadData()
    })
  }
  
  // 日期面板变化回调
 const panelChange = (date,mode)=> {
    if(mode=='month' && isDateInCurrentMonth(date)) setTimeout(()=>onPanelSelect(date))
 }

// 获取点击日期所在周
const getDayWeekRange = (curDay,format)=>{ 
    const now = new Date(curDay);  
    const day = now.getDay(); // 获取今天是周几（0代表周日，1代表周一，依此类推）  
    const diff = now.getDate() - day + (day === 0 ? -6 : 1); // 计算调整后的日期  
    const firstDay = new Date(now.setDate(diff)); // 设置起始日期为周一  
    const lastDay = new Date(firstDay);  
    lastDay.setDate(lastDay.getDate() + 6); // 计算结束日期为周日  
    const datesOfWeek = [];  
    for (let date = new Date(firstDay); date <= lastDay; date.setDate(date.getDate() + 1)) {  
        datesOfWeek.push(dayjs(new Date(date)).format(format));  
    }  
    return datesOfWeek;  
}