Manipulating the day of month of moment.js

Question

I am building a planner that the user is able to add new events to. The date the user types in should become the date the event appears on.

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')

And the input

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

My original idea was to have the user's input be added to the first day of the month (-1), so that if the user entered '12' the calendar's startValue would be 12. This worked, however the calendar I am using only recognized moment.js's date format which is the following.

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

So when my startValue was 12, the calendar did not recognize it.
How do I change only the day of the month in a moment.js format?

My first attempt was this.

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

However this only puts the current time in the input box without me even pressing the button, and I'm not sure why.
My full code is here Link
And here is a code sandbox Sandbox
Thank you for your time.

Answer 1

I'm not sure to have understand all but why you don't just setStartValue in the onChange and then in the onClick format your date. to change only the day of the month in a moment object the method is

moment().date(Number);

so it would give you something like this:

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;