How to change start date, end date in update dialog in fullcalendar

I will change the start and end date in fullcalendar ,in update dialog. I added two textbox to the update dialog. In calendarscript.js I added two lines, passing the new values for the dates, but I get the error:

'System.FormatException-- /Date(NaN)/ isn't a valid value for DateTime'

$(document).ready(function() {
    // update Dialog
    $('#updatedialog').dialog({
        autoOpen: false,
        width: 470,
        buttons: {
            "update": function() {
                   var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    title: $("#eventName").val(),
                    description: $("#eventDesc").val(),
                    start: new Date($("#eventStart").val()),
                    end: new Date($("#eventEnd").val())
                 };

How can I pass date values?

---

There is an update: I no longer have the error in the console - now it changes the date but it sets the time incorrectly.

For example I put as the date of the event:

2021/08/20 18:00 -20/08/2021 19:00

It sets the time at 15:00 and 16:00 on 2021/08/20

New Update: this is the code I'm using:

$('#updatedialog').dialog({
        autoOpen: false,
        width: 680,
        buttons: {
            "update": function () {

                var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    title: $("#eventName").val(),
                    description: $("#eventDesc").val(),
                    color: $("#colorPicker").val(),
                    //start: new Date($("#eventStart").val()),
                    //end: new Date($("#eventEnd").val())
                     start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm"),
                    end: moment($("#eventEnd").val(), "DD/MM/YYYY HH:mm")

                };

On the C# side I have:

public static void updateEvent(int id, String title, String color, String description, DateTime start, DateTime end, bool allDay)
    {...

The end and start values arrive as '01/01/0001 00:00:00'

I send data to C# in this way:

$('#updatedialog').dialog({
        autoOpen: false,
        width: 680,
        buttons: {
            "update": function () {

                var eventToUpdate = {
                    id: currentUpdateEvent.id,
                    title: $("#eventName").val(),
                    description: $("#eventDesc").val(),
                    color: $("#colorPicker").val(),
                    //start: new Date($("#eventStart").val()),
                    //end: new Date($("#eventEnd").val())
                     start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm"),
                    end: moment($("#eventEnd").val(), "DD/MM/YYYY HH:mm")

                };

                //if (checkForSpecialChars(eventToUpdate.title) || checkForSpecialChars(eventToUpdate.description)) {
                //    alert("immetti caratteri da A a Z, da a a z, da 0 a 9, spazi");
                //}
                //else {
                PageMethods.UpdateEvent(eventToUpdate, updateSuccess);
                $(this).dialog("close");

                currentUpdateEvent.title = $("#eventName").val();
                currentUpdateEvent.description = $("#eventDesc").val();
                currentUpdateEvent.color = $("#colorPicker").val();
                //currentUpdateEvent.start = $("#eventStart").val();
                //currentUpdateEvent.end = $("#eventEnd").val();
                currentUpdateEvent.start = new Date($("#eventStart").val());
                currentUpdateEvent.end = new Date($("#eventEnd").val());
                $('#calendar').fullCalendar('updateEvent', currentUpdateEvent);
                //location.reload(true);
                /* } */

            },

C# side I have,

[System.Web.Services.WebMethod(true)]
    public static string UpdateEvent(CalendarEvent cevent)
    {
        List<int> idList = (List<int>)System.Web.HttpContext.Current.Session["idList"];
        if (idList != null && idList.Contains(cevent.id))
        {
             
            if (CheckAlphaNumeric(cevent.title) && CheckAlphaNumeric(cevent.description))
            {
               // EventDAO.updateEvent(cevent.id, cevent.title, cevent.description, cevent.color);
                EventDAO.updateEvent(cevent.id, cevent.title, cevent.color, cevent.description, cevent.start, cevent.end, false);
....

Using Date to parse those date strings is not a good idea...the Date constructor can't necessarily recognise the string format you've used.

Instead you should use momentJS to parse the date and specify the input format so it can read it reliably.

Then to make the date suitable for passing to your C# webmethod, you should explicitly re-format them to an unambiguous format - otherwise I'm not sure what format they'll be serialized in automatically for the AJAX request, and it seems it's not a format your webmethod can understand.

So I suggest, in your eventToUpdate object, setting the date properties as follows:

start: moment($("#eventStart").val(), "DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm")
end: moment($("#eventEnd").val(), "DD/MM/YYYY HH:mm").format("YYYY-MM-DD HH:mm")

---

Relevant documentation:

JS Date object: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Moment JS date parsing: https://momentjs.com/docs/#/parsing/string-format/

MomentJS date output formatting: https://momentjs.com/docs/#/displaying/format/