如何仅制作月份和年份的自定义日历答案

【问题标题】：How to make custom calender only month and year如何仅制作月份和年份的自定义日历
【发布时间】：2022-01-25 10:32:01
【问题描述】：

我正在尝试创建一个看起来像图像的日历，但我无法做到。有没有更好的方法来做到这一点？

这是我的代码（我正在使用时刻来执行此操作）。

import React from 'react'
import moment from 'moment'
const Calender = () => {
    const value = moment()
    const startMonth = value.clone().startOf('year')
    const endMonth = value.clone().endOf('year')
    const month = startMonth.clone()
    const calendar = [];

    // while(startMonth.isBefore(endMonth, 'month')) {
    //     calendar.push(
    //         Array(7).fill(0).map(()=>month.add(1,'month').clone())
    //     )
    // }

    console.log('month ' + month.format('MMM'));
    while (month.format('MMM') === 'Dec') {
        calendar.push(
            // Array(12).map(()=>month.add(1,'month').clone())
            console.log(month.add(1,'month'))
        )
    }

    

    return ( <>
        {console.log(calendar)}
        <div>
            {calendar}
            {endMonth.format('MMM')}
        </div>
    </> );
}
 
export default Calender;

【问题讨论】：

标签： reactjs calendar momentjs

【解决方案1】：

import { useState } from "react";
import "./styles.css";
import Months from "./Months";
export default function App() {
  const Years = [2015, 2016, 2017, 2018, 2019];
  const [selected, setSelected] = useState({ month: "Feb", year: 2017 });
  return (
    <div className="App">
      <div className="calendar">
        {Years.map((year) => {
          return (
            <div key={year}>
              <div
                onClick={() => setSelected({ ...selected, year: year })}
                className={selected.year === year ? "active-year" : "year"}
              >
                {year}
              </div>
              {selected.year === year && (
                <Months setSelected={setSelected} selected={selected} />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}

Months.js：

export default function Months({ selected, setSelected }) {
  const Months = [
    "Jan",
    "Feb",
    "Mar",
    "Apr",
    "May",
    "June",
    "July",
    "Aug",
    "Sep",
    "Oct",
    "Nov",
    "Dec"
  ];
  return (
    <div className="months">
      {Months.map((month) => {
        return (
          <div
            onClick={() => setSelected({ ...selected, month: month })}
            className={selected.month === month ? "active-month" : "month"}
          >
            {month}
          </div>
        );
      })}
    </div>
  );
}

现场演示：https://codesandbox.io/s/goofy-flower-3bvn0

【讨论】：