最近写需求的时候遇到了使用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}
/>
</>
)
}
具体结果打印: