Блог

В настоящее время я работаю над приложением, в котором я пытаюсь создать календарь с помощью javascript. Основываясь на текущей дате, я могу нажать кнопку «Назад» и вернуться назад на столько месяцев, сколько захочу, и выбрать дни в каждом месяце. Я также могу нажать кнопку «Вперед» и перейти на столько месяцев вперед, сколько захочу. Проблема, с которой я сталкиваюсь, заключается в том, что если я вернусь, скажем, к октябрю 2020 года, и нажму кнопку «Вперед», календарь начнется с января 2021 года, потому что я использую циклические месяцы на основе текущей даты, а не дат, в которых я сейчас нахожусь. Чего я хотел бы добиться, так это того, что если я окажусь в октябре 2020 года и нажму кнопку «Вперед», то мне бы хотелось, чтобы это произошло в ноябре 2020 года. Любые предложения приветствуются.

мой код выглядит следующим образом:

 import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [count, setCount] = useState(1);
  const [countTwo, setCountTwo] = useState(1);
  const [dates, setDates]=useState(null)

  const getDaysArray = async (s, e) => {
    let a = [];
    for (let d = new Date(s); d <= e; d.setDate(d.getDate()   1)) {
      a.push(new Date(d).toString());
    }

    return a;
  };

  const prevMonth = async () => {
    setCount((state) => state   1);
    let d = new Date();
    d.setMonth(d.getMonth() - count);
    let firstDay = new Date(d.getFullYear(), d.getMonth(), 1);
    let lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth()   1, 0);
    const dates = await getDaysArray(firstDay, lastDay);
    setDates(dates);
  };

  const nextMonth = async () => {
    setCountTwo((state) => state   1);
    let d = new Date();
    d.setMonth(d.getMonth()   countTwo);

    let firstDay = new Date(d.getFullYear(), d.getMonth(), 1);
    let lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth()   1, 0);

    const dates = await getDaysArray(firstDay, lastDay);
    setDates(dates);
  };

  return (
    <div className="App">
      <button onClick={prevMonth}>Prev Month</button>
      <button onClick={nextMonth}>Next Month</button>
      {dates amp;amp;
        dates.map((item, i) => {
          return <div key={i}>{item}</div>;
        })}
    </div>
  );
}
 

вот ручка с кодом для отладки! https://codesandbox.io/s/sweet-brook-y2n7p?file=/src/App.js:0-1413

Вместо отслеживания текущей даты используйте счетчик для отслеживания номера текущего месяца. Затем вычтите или добавьте единицу к этому числу для предыдущего или следующего. И укажите месяц, используя это число.

Вот ответвление вашего проекта с этим решением:

https://codesandbox.io/s/clever-rgb-mryst

И код:

 import React, { useState } from "react";
import "./styles.css";

export default function App() {
   const [visibleMonth, setVisibleMonth] = useState(new Date().getMonth());
  //  const [countTwo, setCountTwo] = useState(1);
  const [dates, setDates] = useState(null);

  const getDaysArray = async (s, e) => {
    let a = [];
    for (let d = new Date(s); d <= e; d.setDate(d.getDate()   1)) {
      a.push(new Date(d).toString());
    }

    return a;
  };

  const prevMonth = async () => {
    let d = new Date();
    d.setMonth(visibleMonth - 1);
    setVisibleMonth((state) => visibleMonth - 1);
    let firstDay = new Date(d.getFullYear(), d.getMonth(), 1);
    let lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth()   1, 0);
    const dates = await getDaysArray(firstDay, lastDay);
    setDates(dates);
  };

  const nextMonth = async () => {
    let d = new Date();
    d.setMonth(visibleMonth   1);
    setVisibleMonth((state) => visibleMonth   1);

    let firstDay = new Date(d.getFullYear(), d.getMonth(), 1);
    let lastDay = new Date(firstDay.getFullYear(), firstDay.getMonth()   1, 0);

    const dates = await getDaysArray(firstDay, lastDay);
    setDates(dates);
  };

  return (
    <div className="App">
      <button onClick={prevMonth}>Prev Month</button>
      <button onClick={nextMonth}>Next Month</button>
      {dates amp;amp;
        dates.map((item, i) => {
          return <div key={i}>{item}</div>;
        })}
    </div>
  );
}