处理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`))

但是，这只会将当前时间放在输入框中，而我什至没有按下按钮，我不知道为什么。
我的完整代码在这里链接
这是一个代码沙箱沙箱
感谢您的时间。

Answer 1

我不确定是否了解所有内容，但为什么您不只是在 onChange 中 setStartValue 然后在 onClick 中格式化您的日期。 暂时只更改月份中的某天 object 方法是

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;