【问题标题】:How to change start date, end date in update dialog in fullcalendar如何在全日历的更新对话框中更改开始日期、结束日期
【发布时间】:2021-08-17 12:55:30
【问题描述】:

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

'System.FormatException-- /Date(NaN)/ 不是 日期时间'

$(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:0016: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);
....

【问题讨论】:

  • 你究竟是什么时候收到这个错误的?我觉得您可能错过了抛出它的代码行。当时您的日期文本框中有哪些值?您使用的是哪个版本的 fullCalendar?你的问题有很多遗漏,导致不确定性。请采取tour,阅读How to Ask 以及如何创建minimal reproducible example 您的问题,以便您了解如何使用该网站以及您需要提供哪些信息。那么请编辑您的问题,如果可以理解,我们将很乐意尝试帮助您。谢谢。
  • 我正在使用 fullcalendar 3.10 我添加了两个输入框: 在 default.aspx 中,在
  • 如果您有额外的代码要添加,请按照我的要求编辑您的问题。不要将代码放在 cmets 中,它很难阅读,而且很容易让其他人注意到它。 “编辑”按钮位于小蓝色标签附近的问题下方。而且,无论如何,该代码不是我要求您提供的信息 - 请重新阅读我的请求。
  • 对不起,我对论坛工具还不是很熟悉
  • 感谢您的更新。我认为您不应该使用new Date 来解析这些日期字符串... Date 构造函数不一定能识别您使用的字符串格式(请参阅developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…)。此外,fullCalendar3 使用 momentJS 来解析日期,因此无论如何都不需要使用 Date 对象。有了它,您可以指定它应该使用的确切格式 - 请参阅momentjs.com/docs/#/parsing/string-format。这应该会更好:codepen.io/ADyson82/pen/oNWRQKY

标签: javascript fullcalendar fullcalendar-3


【解决方案1】:

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

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

然后,为了使日期适合传递给您的 C# webmethod,您应该明确地将它们重新格式化为明确的格式 - 否则我不确定它们将为 AJAX 请求自动序列化的格式,它看来这不是您的网络方法可以理解的格式。

所以我建议,在您的 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")

相关文档:

JS 日期对象:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Moment JS 日期解析:https://momentjs.com/docs/#/parsing/string-format/

MomentJS 日期输出格式:https://momentjs.com/docs/#/displaying/format/

【讨论】:

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签