如何在全日历的更新对话框中更改开始日期和结束日期

Question

我将在更新对话框中更改完整日历中的开始和结束日期。我在更新对话框中添加了两个文本框。在 calendarscript.js 中，我添加了两行，传递了日期的新值，但出现错误：

'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())
                 };

如何传递日期值？

有一个更新：控制台中不再有错误 - 现在它更改了日期但设置的时间不正确。

比如我把事件的日期写成：

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

它将时间设置为 15:00 和 16:00 2021/08/20

新更新：这是我正在使用的代码：

$('#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")

                };

在 C# 方面我有：

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

结束值和开始值到达“01/01/0001 00:00:00”

我是这样向C#发送数据的：

$('#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#这边我有，

[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);
....

Answer 1

使用 Date 来解析那些日期字符串不是一个好主意...Date 构造函数不一定能识别您使用的字符串格式。

相反，您应该使用 momentJS 来解析日期并指定输入格式，以便它可以可靠地读取它。

然后为了使日期适合传递给您的 C# webmethod，您应该明确地将它们重新格式化为明确的格式 - 否则我不确定它们会自动序列化为什么格式 AJAX 请求，它似乎不是您的 web 方法可以理解的格式。

所以我建议，在您的 eventToUpdate 对象中，按如下方式设置日期属性：

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

如何在全日历的更新对话框中更改开始日期和结束日期

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

javascript

fullcalendar

fullcalendar-3