操纵 moment.js 月份的第几天

Question

我正在构建一个用户能够向其添加新事件的计划器。用户输入的日期应该成为事件出现的日期。

const addEvent = (e) => {
    const newEvents = [...events];
    newEvents.push({
      title: eventValue,
      start: startValue,
      end: moment()
    });console.log(events)
    setEvents(newEvents);
  };
  const startOfMonth = moment().startOf('month').format('DD')

和输入

<input
          id="startInput"
          name="startInput"
          value={startValue}
          onChange={(e) => {
           
           setStartValue(parseInt(startOfMonth) + parseInt(e.target.value) -1)
          }}
        />

我最初的想法是将用户的输入添加到该月的第一天 (-1)，这样如果用户输入“12”，日历的 startValue 就会是 12。这行得通，但是我使用的日历只能识别以下 moment.js 的日期格式。

Sat Dec 05 2020 08:40:31 GMT-0800

所以当我的startValue是12时，日历不识别。
如何仅更改 moment.js 格式的月份日期？

我的第一次尝试是这样的。

let tempValue = (parseInt(startOfMonth) + parseInt(e.target.value) -1)
           setStartValue(moment().format(`MMMM ${tempValue} YYYY, h:mm:ss a`))

然而，这只是将当前时间放入输入框，而我什至没有按下按钮，我不确定为什么。
我的完整代码在这里 Link
这是一个代码沙箱 Sandbox
感谢您的宝贵时间。

Answer 1

我不确定是否了解所有内容，但为什么您不在 onChange 中设置 StartValue 然后在 onClick 格式中设置您的日期。仅更改 moment 对象中的日期，方法是

moment().date(Number);

所以它会给你这样的东西:

import { Calendar, momentLocalizer } from "react-big-calendar";
import moment from "moment";

import "./App.css";
import "react-big-calendar/lib/css/react-big-calendar.css";

const localizer = momentLocalizer(moment);
const App = () => {
  const [eventValue, setEventValue] = useState("");
  const [startValue, setStartValue] = useState("");
  const [events, setEvents] = useState([
    {
      title: "Finish Calendar",
      start: moment(),
      end: moment(),
      allDay: false
    }
  ]);

  const addEvent = (e) => {
    const newEvents = [...events];
    newEvents.push({
      title: eventValue,
      start: moment().date(startValue),
      end: moment()
    });
    console.log(events);
    setEvents(newEvents);
  };
  const startOfMonth = moment().startOf("month").format("DD");

  return (
    <div className="App">
      <div className="event-input">
        <label for="eventInput">Event:&nbsp;</label>
        <input
          id="eventInput"
          name="eventInput"
          value={eventValue}
          onChange={(e) => {
            setEventValue(e.target.value);
          }}
        />
        <label for="eventInput">Start&nbsp;</label>
        <input
          id="startInput"
          name="startInput"
          value={startValue}
          onChange={(e) => {
           
            setStartValue(
              parseInt(startOfMonth) + parseInt(e.target.value) - 1
            );
          }}
        />
        <button onClick={addEvent}>Add event</button>
      </div>
      <Calendar
        localizer={localizer}
        defaultDate={new Date()}
        defaultView="month"
        events={events}
        style={{ height: "75vh" }}
      />
      <div className="list">
        <ul>
          <li>Display Weekly view X</li>
          <li>Highlight today X</li>
          <li>Allow navigation to different weeks X</li>
          <li>allow adding new events</li>
          <li>allow editing existing events</li>
          <li>allow deleting events</li>
          <li>Persisting data </li>
          <li>Use apis to load and save data </li>
        </ul>
      </div>
    </div>
  );
};

export default App;

操纵 moment.js 月份的第几天

Manipulating the day of month of moment.js

javascript

momentjs

reactjs