Antd Calendar 获取面板上的第一个日期和最后一个日期

嘟嘟嘟嘟~

已于 2023-12-20 11:50:19 修改

阅读量1k

点赞数 9

文章标签： javascript 前端 typescript

于 2023-12-20 11:48:52 首次发布

本文链接：https://blog.csdn.net/m0_55686063/article/details/135104060

版权

文章讲述了如何在使用AntDesign(antd)的Calendar组件时，获取指定面板上的起始日期（如2023-11-27）和结束日期（如2024-01-07），通过moment.js处理日期逻辑实现。

摘要由CSDN通过智能技术生成

最近写需求的时候遇到了使用antd Calendar 组件需要获取到面板上第一个日期以及最后一个日期

例如：下图需要获取 2023-11-27到2024-1-7

具体代码：

import moment, { Moment } from 'moment';
import { Calendar } from 'antd';
const MobilePayment = (props: any) => {
  const handlePanelChange = (date: Moment, mode: CalendarMode) => {
    const { firstDate, lastDate } = getFirstDateAndLastDateOnThePanel(date);
    console.log("hihiihi", {
      firstDate,
      lastDate
    })
  }
  // 获取面板的起始日期和结束日期
  const getFirstDateAndLastDateOnThePanel = (date: Moment) => {
    // 这个月的第一天
    const firstDateOfMonth = moment(date).startOf("month")
    // 第一天是星期几
    const firstdayOfWeek = Number(firstDateOfMonth.day()) === 0 ? 7 : Number(firstDateOfMonth.day())
    // console.log('firstdayOfWeek',firstdayOfWeek)
    let dateInMonth: Moment = firstDateOfMonth;
    // 如果是星期一的话 就是这个月的第一天
    if (firstdayOfWeek !== 1) {
      dateInMonth = date.month(date.month() - 1).date(moment(date).subtract(1, 'month').daysInMonth() - firstdayOfWeek + 2);
    }

    // 计算有多少天是下个月的
    const restPassedDay = 42 - firstdayOfWeek + 1 - Number(moment(date).daysInMonth());
    // 计算下个月的日期
    const lastDate = date.month(date.month() + 1).date(restPassedDay);

    return {
      firstDate: dateInMonth.format('YYYY-MM-DD'),
      lastDate: lastDate.format('YYYY-MM-DD'),
    };
  };

  return (
    <>
      <Calendar
        mode="month"
        onPanelChange={handlePanelChange}
      />
    </>
  )
}

具体结果打印：