在 jQuery datepicker 中选择为 null 的日期答案

【问题标题】：Date with Sept picked as null in jQuery datepicker在 jQuery datepicker 中选择为 null 的日期
【发布时间】：2019-04-15 22:36:51
【问题描述】：

该应用程序位于 ASP.NET MVC 4 中，其中在 View 中有一个附加到 jQuery DatePicker 的 TextBox 以仅选择月份和年份组合。

声明为：

@Html.TextBox("myDate", Model.myDate.HasValue ? Model.myDate.Value.ToString("MM/dd/yyyy") : string.Empty, new { @readonly = "readonly", maxlength = "12", style = "width: 75px;height:20px", id = "myDate" })

取值如下：

$(function () {
    $("#myDate").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'MM yy',
        minDate: 0,
        onClose: function () {
            var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
        },

        beforeShow: function () {
            if ((selDate = $(this).val()).length > 0) {
                iYear = selDate.substring(selDate.length - 4, selDate.length);
                iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
                         $(this).datepicker('option', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            }
        }
    });
});

文本框中的值通过ajax调用发送到控制器方法：

data: $("#myForm").serializeArray();

这里在发送前检查表单数组时，文本包含“2019 年 9 月”、“2019 年 7 月”等值。

在模型中，字段，即 myDate 被定义为数据类型 DateTime？没有其他属性。

问题是当我选择 2019 年 9 月时，代码隐藏端的基础模型获得空值。最初我认为这可能是由于 9 月有 4 个字符，但 2019 年 6 月，2019 年 7 月工作正常。

我不确定为什么只有包含 Sept 的 myDate 的值在其他月份工作时才为空。

【问题讨论】：

您是否检查过$("#myForm").serializeArray() 的值以查看正在生成并发送到服务器的内容？
在使用 AJAX 之前，我尝试使用与您相同的设置进行序列化，并获得整月的 September 2019 而不是 Sept 2019。能否提供其他相关细节？
@StephenMuecke 是的，我检查了数组。键值 pait 包含名称：myDate 和值：2019 年 9 月。所以我假设 jQuery 正在尽其所能，我无法理解 .net 如何将传入数组中的值分配给模型中的 DatetTime 字段。
作为旁注，您应该使用.serialize() 而不是 .serializeArray(). In order for the DefaultModelBinder` 来绑定它，它需要是填充月份名称 - myDate: 'September 2019'，（不是 @ 987654330@)
注意测试，但它也应该适用于'Sep 2019'

标签： jquery asp.net-mvc datepicker jquery-ui-datepicker

【解决方案1】：

所以终于找到了答案。 .net 框架无法将 2019 年 9 月转换为有效的日期时间，但在 2019 年 9 月或 2019 年 9 月之后运行良好。为了反击将monthNames数组作为参数传递给DatePicker，使其只有3个字母的月份名称；

$(function () {
    $("#myDate").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'MM yy',
        minDate: 0,
        monthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]
        onClose: function () {
            var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
            var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
            $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
        },

        beforeShow: function () {
            if ((selDate = $(this).val()).length > 0) {
                iYear = selDate.substring(selDate.length - 4, selDate.length);
                iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
                         $(this).datepicker('option', 'monthNames'));
                $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
                $(this).datepicker('setDate', new Date(iYear, iMonth, 1));
            }
        }
    });
});

这有效，现在我可以获得 2019 年 9 月的有效 DatetIme

【讨论】：