c# - jQuery UI 日期选择器无法与 asp.net mvc 一起正常工作

Question

我在 MVC 工作。我在我的“日期”控件上使用了 jQuery datepicker。调用 datepicker 的 jquery 代码如下:

    $(document).ready(function () {
     $('.date').datepicker({ dateFormat: "dd/mm/yy" });
     });

我的日期时间部分 View 是:

     @Html.TextBoxFor(x => x.Value, new { id = Model.Name, name = Model.Name, @class = "date", @readonly = true })

我的 DateTimeViewModel 属性是:

    public string Name { get; set; }

   public DateTime? Value { get; set; }

我在表单中使用这个局部 View 。一旦我完全填写我的表格并点击提交，焦点再次转到我的日期选择器以再次选择日期。它一次又一次地发生，我的表格变得无法提交。我在 chrome 上调试此控件，我注意到日期无效，如下所示:-

    <input class="ff date hasDatepicker input-validation-error" data-val="true" data-val-date="The field Value must be a date." name="Fields[Lea_ex1_47].Value" readonly="True" type="text" value="" id="dp1369308655980">

编辑抱歉提晚了，但我现在也观察到了。我的日期选择器只取每个月的 1 到 12 日。即:在 30/31 天中，日期从 1 到 12(验证为真)，其他 13 到 31 给出验证错误(验证为假)。

请告诉我发生这种情况的原因？我怎样才能摆脱这个？

提前致谢..

Answer 1

大概是这部分:

{ dateFormat: "dd/mm/yy" }

这不是 .NET 显示日期的默认方式，因此 jQuery 可能无法解析它。您需要确保日期在月份之前，年份是 2 位数字。

编辑:在阅读了您关于当天大于 12 时控件失败的编辑后，这肯定是造成这种情况的原因。但是，在您修复日期格式后，我在下面提到的问题可能仍然会导致问题。

其他潜在问题:

你正在设置一个 readonly HTML 属性，我不知道你为什么要这样做:

@readonly = true

这将不执行任何操作或禁止弹出日期选择器。

最后，我注意到您正在手动设置名称和 ID:

id = Model.Name, name = Model.Name

那是 Model.Value 的编辑器，那么为什么要将它连接到 Model.Name？您页面中的任何其他内容是否具有相同的 ID？是否有任何其他表单字段具有相同的名称？如果是这样，它很可能会破坏客户端和服务器上的东西。您甚至不需要指定那些； MVC 辅助方法可以为您完成。

做什么:

首先，按照某些人的建议注释您的 ViewModel，但要确保格式正确:

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/mm/yy}", ApplyFormatInEditMode = true)]
public DateTime? Value { get; set; }

这应该可以解决它，但还要考虑从 Razor 代码中完全删除 id、name 和 readonly 属性。

如果您使用的是 HTML5，可能有帮助的一件事是使用 EditorFor 而不是 TextBoxFor。这应该会导致它使用 HTML5 DateTime 输入类型。 jQuery-UI 在处理 TextBox 时应该没有任何问题，但也没什么坏处。

@Html.EditorFor(x => x.Value, new { @class = "date" })