Javascript 如何在react中显示月日以下的日期？

我正在尝试使用react+moment js制作简单的

当月日历。我能够获得
每月的第一个日期和结束日期
。现在我想在天（
Mon
，
Tue
）。因此第一个九月
01-08-2020
将显示在
Tue
下面

这是我的密码

实际上是这样的


但是现在我的约会看起来是水平的，就像这样

这是我的密码

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

function fetchMonthDates() {
  let monthDates = [];
  let start = moment().startOf("month").date();
  let end = moment().endOf("month").date();
  for (let i = 0; i < end; i++) {
    let obj = {
      _id: moment().startOf("month").add(i, "days").format("DD-MMM-YYYY"),
      date: moment().startOf("month").add(i, "days").date()
    };
    monthDates.push(obj);
  }

  return monthDates;
}

export default function App() {
  const [state, setState] = useState(() => fetchMonthDates());
  return (
    <div className="App">
      <ul className="header">
        <li className="header-item pd15">Sun</li>
        <li className="header-item pd15">Mon</li>
        <li className="header-item pd15">Tue</li>
        <li className="header-item pd15">Wed</li>
        <li className="header-item pd15">Thu</li>
        <li className="header-item pd15">Fri</li>
        <li className="header-item pd15">Sat</li>
      </ul>
      <ul className="date-items">
        {state.map((i) => (
          <li className="pd15">{i.date}</li>
        ))}
      </ul>
    </div>
  );
}

import React，{useState}来自“React”；
导入“/styles.css”；
从“时刻”中导入时刻；
函数fetchMonthDates（）{
让monthDates=[]；
让开始=时刻（）.startOf（“月”）.date（）；
让end=moment（）.endOf（“月”）.date（）；
for（设i=0；ifetchMonthDates（））；
返回(

太阳报
周一
星期二
Wed
Thu
Fri
Sat


{state.map（（i）=>(
{i.date}
))}

);
}

我不需要样式，但日期应该显示在日期下方？可能吧。我不想使用datepicker我正在定制
当月日历

有更新吗？这是可能的
这是基本的，但你可以调整它以获得永久性：

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

function fetchMonthDates() {
  let monthDates = [];
  let start = moment().startOf("month").date();
  let end = moment().endOf("month").date();
  // this is to offset the starting day, which was a Tues for September
  const firstDayOffSet = moment().startOf("month").day();

  for (let i = 0; i < end; i++) {
    let obj = {
      _id: moment().startOf("month").add(i, "days").format("DD-MMM-YYYY"),
      date: moment().startOf("month").add(i, "days").date()
    };
    monthDates.push(obj);
  }

  // pads the beginning of the array to slide the days to the right
  // you'll want to pad this with the previous months days up to the 
  // offset count
  return [...[...new Array(firstDayOffSet)].map(()=> ({_id: '', date: ''})),...monthDates];
}

export default function App() {
  const [state, setState] = useState(() => fetchMonthDates());
  return (
    <div className="App">
      <ul className="calendar">
        <li className="header-item pd15">Sun</li>
        <li className="header-item pd15">Mon</li>
        <li className="header-item pd15">Tue</li>
        <li className="header-item pd15">Wed</li>
        <li className="header-item pd15">Thu</li>
        <li className="header-item pd15">Fri</li>
        <li className="header-item pd15">Sat</li>
        {state.map((i) => (
          <li className="pd15">{i.date}</li>
        ))}
      </ul>
    </div>
  );
}

// styles.css
.App {
  font-family: sans-serif;
}
ul {
  list-style: none;
}

.pd15 {
  padding: 5px;
  text-align: center;
}

.calendar {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-template-rows: auto;
  border-bottom: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
}

//App.js
从“React”导入React，{useState}；
导入“/styles.css”；
从“时刻”中导入时刻；
函数fetchMonthDates（）{
让monthDates=[]；
让开始=时刻（）.startOf（“月”）.date（）；
让end=moment（）.endOf（“月”）.date（）；
//这是为了抵消9月份周二的开始日
常量firstDayOffSet=力矩（）.startOf（“月”）.day（）；
for（设i=0；i（{u id:''，日期：'}）），…monthDates]；
}
导出默认函数App（）{
const[state，setState]=useState（（）=>fetchMonthDates（））；
返回(

太阳报
周一
星期二
Wed
Thu
Fri
Sat
{state.map（（i）=>(
{i.date}
))}

);
}
//styles.css
.App{
字体系列：无衬线；
}
保险商实验室{
列表样式：无；
}
.pd15{
填充物：5px；
文本对齐：居中；
}
.日历{
显示：网格；
网格模板列：自动；
网格模板行：自动；
边框底部：1px实心#eeeee；
边框顶部：1px实心#eeeee；
}

我做了一些造型，以便我能正确地看到它，但如果你不需要它，你可以忽略这些

这给了我9月份的这个：
这是最基本的，但您可以调整它以获得永久性：

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

function fetchMonthDates() {
  let monthDates = [];
  let start = moment().startOf("month").date();
  let end = moment().endOf("month").date();
  // this is to offset the starting day, which was a Tues for September
  const firstDayOffSet = moment().startOf("month").day();

  for (let i = 0; i < end; i++) {
    let obj = {
      _id: moment().startOf("month").add(i, "days").format("DD-MMM-YYYY"),
      date: moment().startOf("month").add(i, "days").date()
    };
    monthDates.push(obj);
  }

  // pads the beginning of the array to slide the days to the right
  // you'll want to pad this with the previous months days up to the 
  // offset count
  return [...[...new Array(firstDayOffSet)].map(()=> ({_id: '', date: ''})),...monthDates];
}

export default function App() {
  const [state, setState] = useState(() => fetchMonthDates());
  return (
    <div className="App">
      <ul className="calendar">
        <li className="header-item pd15">Sun</li>
        <li className="header-item pd15">Mon</li>
        <li className="header-item pd15">Tue</li>
        <li className="header-item pd15">Wed</li>
        <li className="header-item pd15">Thu</li>
        <li className="header-item pd15">Fri</li>
        <li className="header-item pd15">Sat</li>
        {state.map((i) => (
          <li className="pd15">{i.date}</li>
        ))}
      </ul>
    </div>
  );
}

// styles.css
.App {
  font-family: sans-serif;
}
ul {
  list-style: none;
}

.pd15 {
  padding: 5px;
  text-align: center;
}

.calendar {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto;
  grid-template-rows: auto;
  border-bottom: 1px solid #eeeeee;
  border-top: 1px solid #eeeeee;
}

//App.js
从“React”导入React，{useState}；
导入“/styles.css”；
从“时刻”中导入时刻；
函数fetchMonthDates（）{
让monthDates=[]；
让开始=时刻（）.startOf（“月”）.date（）；
让end=moment（）.endOf（“月”）.date（）；
//这是为了抵消9月份周二的开始日
常量firstDayOffSet=力矩（）.startOf（“月”）.day（）；
for（设i=0；i（{u id:''，日期：'}）），…monthDates]；
}
导出默认函数App（）{
const[state，setState]=useState（（）=>fetchMonthDates（））；
返回(

太阳报
周一
星期二
Wed
Thu
Fri
Sat
{state.map（（i）=>(
{i.date}
))}

);
}
//styles.css
.App{
字体系列：无衬线；
}
保险商实验室{
列表样式：无；
}
.pd15{
填充物：5px；
文本对齐：居中；
}
.日历{
显示：网格；
网格模板列：自动；
网格模板行：自动；
边框底部：1px实心#eeeee；
边框顶部：1px实心#eeeee；
}

我做了一些造型，以便我能正确地看到它，但如果你不需要它，你可以忽略这些

这给了我9月份的这个：
为什么
基本的
？？为什么
基本的
？？