我的日历仅显示 31 天的月份。海尔普普

Question

我的日历早些时候工作正常。但现在它跳过了几个月，只显​​示有 31 天的月份。

例如：如果当前月份是5月，那么下个月应该是6月。但它在重复 May，然后将下个月显示为 July（有 31 天）。

let nav = 0;

const calendar = document.getElementById("calendar");
const weekdays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

function load() {
  const dt = new Date();

  if (nav !== 0) {
    dt.setMonth(new Date().getMonth() + nav);
  }

  const day = dt.getDate();
  const month = dt.getMonth();
  const year = dt.getFullYear();

  const firstDayOfMonth = new Date(year, month, 1);
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const dateString = firstDayOfMonth.toLocaleDateString("en-us", {
    weekday: "long",
    year: "numeric",
    month: "numeric",
    day: "numeric",
  });
  const paddingDays = weekdays.indexOf(dateString.split(", ")[0]);

  document.getElementById("monthDisplay").innerText =
    dt.toLocaleDateString("pt-br", {
      month: "long"
    }).toUpperCase() +
    " " +
    year;

  calendar.innerHTML = "";

  for (let i = 1; i <= paddingDays + daysInMonth; i++) {
    const daySquare = document.createElement("div");
    daySquare.classList.add("day");

    if (i > paddingDays) {
      daySquare.innerText = i - paddingDays;

      daySquare.addEventListener("click", () => console.log("click"));
    } else {
      daySquare.classList.add("padding");
    }

    calendar.appendChild(daySquare);
  }
}

function initButtons() {
  document.getElementById("nextButton").addEventListener("click", () => {
    nav++;
    load();
  });

  document.getElementById("backButton").addEventListener("click", () => {
    nav--;
    load();
  });
}

initButtons();
load();

<div id="header">
  <button id="backButton">Back</button>
  <div id="monthDisplay"></div>
  <button id="nextButton">Next</button>
</div>

<div id="weekdays">
  <div>Domingo</div>
  <div>Segunda</div>
  <div>Terça</div>
  <div>Quarta</div>
  <div>Quinta</div>
  <div>Sexta</div>
  <div>Sabado</div>
</div>

<div id="calendar"></div>

Answer 1

原因是您在 3 月 31 日运行脚本。

当你这样做时

  const dt = new Date();

您将 dt 设置为 3 月 31 日的时间。 那你就做

    dt.setMonth(new Date().getMonth() + nav);

nav == 1 时，返回 4 月 31 日。但 4 月没有第 31 天，因此将其视为 5 月 1 日。

如果您想按月进行导航，最好使用当月的第一天作为基准日期，而不是当前日期：

  const today = new Date();
  const dt = new Date(today.getFullYear(), today.getMonth());

您的代码从不使用day 变量，因此不需要

  const day = dt.getDate();

但如果您确实需要当前日期，请改为从today() 获取：

  const day = today.getDate();

Answer 2

所以我无法准确解释为什么您的代码会以现在的方式运行，但它必须与您使用 dt.setMonth(new Date().getMonth() + nav) 的方式有关。当我在这行代码之后将 dt 的结果输出到控制台时，它总是会返回该月的第一天，然后是最后一天，然后跳过一个月并重复。为了解决这个问题，我删除了你的 nav 变量，将 dt、day、month 和 year 常量移动为全局变量，并向 click 事件侦听器添加了一些代码以适当地增加年和月。虽然这解决了您的问题，但它可能并不完全是您想要的。如果不是，请让我知道 cmets 是否提供有关您可能拥有的限制或您要完成的任务的更多详细信息。谢谢。

//let nav = 0;
let dt = new Date();
let day = dt.getDate();
let month = dt.getMonth();
let year = dt.getYear() + 1900;

const calendar = document.getElementById("calendar");
const weekdays = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

function load() {
  // const dt = new Date();
  // if (nav !== 0) {
  //   dt.setMonth(new Date().getMonth() + nav);
  // }

  // const day = dt.getDate()-1;
  // const month = dt.getMonth();
  // const year = dt.getFullYear();
  // dt.setDate(day);
  dt.setMonth(month);
  dt.setYear(year);

  const firstDayOfMonth = new Date(year, month, 1);
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  const dateString = firstDayOfMonth.toLocaleDateString("en-us", {
    weekday: "long",
    year: "numeric",
    month: "numeric",
    day: "numeric",
  });
  const paddingDays = weekdays.indexOf(dateString.split(", ")[0]);

  const monthName = dt.toLocaleString('pt-br', {month: 'long'});

  document.getElementById("monthDisplay").innerText =
    monthName.toUpperCase() +
    " " +
    year;

  calendar.innerHTML = "";

  for (let i = 1; i <= paddingDays + daysInMonth; i++) {
    const daySquare = document.createElement("div");
    daySquare.classList.add("day");

    if (i > paddingDays) {
      daySquare.innerText = i - paddingDays;

      daySquare.addEventListener("click", () => console.log("click"));
    } else {
      daySquare.classList.add("padding");
    }

    calendar.appendChild(daySquare);
  }
}

function initButtons() {
  document.getElementById("nextButton").addEventListener("click", () => {
    // nav++;
    if(month == 11){
      dt.setMonth(month = 0);
      year++;
    }else{
      dt.setMonth(++month);
    }
    load();
  });

  document.getElementById("backButton").addEventListener("click", () => {
    // nav--;
    if(month == 0){
      dt.setMonth(month = 11);
      year--;
    }else{
      dt.setMonth(--month);
    }
    load();
  });
}

initButtons();
load();