Antd Calendar 패널에서 첫 번째 날짜와 마지막 날짜 가져오기

Antd Calendar 패널에서 첫 번째 날짜와 마지막 날짜 가져오기


달력이 있습니다.



물론 01은 7월의 첫 번째 날짜이고 31은 7월의 마지막 날짜입니다. 이 대신 경우에 따라 패널에서 첫 번째 날짜와 마지막 날짜를 얻고 싶을 수도 있습니다. 6월 26일과 8월 7일.
Antd 캘린더는 onPanelChange 이벤트를 제공합니다. 우리는 이벤트에 코드를 작성할 것입니다. Antd는 moment를 기본 날짜 라이브러리로 채택했습니다. 취급이 정말 간편합니다date . 그래도 다른 날짜 라이브러리로 바꿀 수 있습니다. ( docs )


패널에서 첫 번째 날짜를 얻으려면 해당 월의 첫 번째 날짜에서 일 수를 뺍니다. moment는 날짜를 숫자로 나타냅니다.

일요일(0) ~ 토요일(6)

2022년 7월의 첫 번째 날짜는 금요일입니다. 일수로 5를 나타냅니다. 2022년 7월의 첫 번째 날짜에서 5를 빼면 2022년 6월 26일이 됩니다.

패널의 날짜 수는 42개입니다. 42에서 해당 월의 마지막 날짜와 첫 번째 날짜의 일 수를 뺍니다.

2022년 7월에서 42 - 5(첫날의 일자) - 31(7월의 마지막 날)을 빼면 6이 됩니다. 7월의 마지막 날짜에 숫자를 더하면 2022년 8월 6일입니다.


코드는 다음과 같습니다.

import { useState } from "react";
import moment, { Moment } from "moment";
import { Calendar } from "antd";

const getFirstDateAndLastDateOnThePanel = (date: Moment) => {
  const firstDate = moment(date).startOf("month");
  const lastDate = moment(date).endOf("month");

  const firstDateDay = firstDate.day();
  firstDate.subtract(firstDateDay, "days");
  lastDate.add(42 - Number(lastDate.format("DD")) - firstDateDay, "days");

  return {
    firstDate,
    lastDate,
  };
};

function App() {
  const [date, setDate] = useState(moment());

  const handlePanelChange = (date: Moment) => {
    const { firstDate, lastDate } = getFirstDateAndLastDateOnThePanel(date);

    console.log({
      firstDate: firstDate.format("YYYY-MM-DD"),
      lastDate: lastDate.format("YYYY-MM-DD"),
    });
  };

  return (
    <div>
      <Calendar
        value={date}
        onChange={setDate}
        onPanelChange={handlePanelChange}
      />
    </div>
  );
}

export default App;

이것이 누군가에게 도움이 되기를 바랍니다.
행복한 코딩!