antd Calendar 動態接受數據和單獨月份處理

1.首先引入atnd Calendar日曆組件

2.設計思路 通過時間選擇Select選擇多個時間段，獲取每一個的值之後，通過發送請求的方式把時間段傳到Calendar日曆組件，組件通過獲取的時間顯示狀態到頁面上去。

3.根據設想獲取多個select獲取的值

根據useState的設置承接select的值初始狀態爲一個對象，這樣每次生成的select的内容都是他自己onchange選擇的數據

onChange={(value,dateString)=>{selArrdate[indexdate].dates=dateString }} />

4.獲取之後通過數據邏輯判斷對數據進行重組創建一個對應請求的數據格式，個人公司需求不同我就不多説了

5.根據獲取到的時間段傳到日曆組件具現。

//上傳時閒到日曆上判斷每月選擇日期

const getListData = (value) => {

let listData;

if(moduleArr){

moduleArr.map((item,index)=>{
  let selectDate = item.select_date.slice(8,10)
  let contentStauts = item.working_content
   switch (value.date()) {

   case Number(selectDate):
  listData = [
    {
      type: stauts,
      content: contentStauts,
    }
  ];
  break;

    default:
  }
  return selectDate
}) }
复制代码

//根據判斷每月選擇日期，進行渲染

const dateCellRender = (value) => {

let listss = []

if(moduleArr.length > 0) {

moduleArr.map((item)=>{
  
  if(item.select_date.slice(0,10) === value._d.toISOString().slice(0,10)){
  
    return listss = getListData(value);
  }else {
  
    return ""
  }
})
复制代码

}

效果： 日期選擇中8.09 8.17
在圖上顯示

作者：夢行者
链接：https://juejin.cn/post/7137114205315923976
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。