4

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

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

我的日期时间部分视图是：

     @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; }

我在表单中使用这个局部视图。一旦我完全填写了我的表格并单击提交，焦点再次转到我的日期选择器以再次选择日期。它一次又一次地发生，我的表格无法提交。我在 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 天给出验证错误（验证为假）。

请告诉我为什么会发生这种情况？我怎样才能摆脱这个？

提前致谢..

4

4 回答 4

3

大概就是这个部分：

{ dateFormat: "dd/mm/yy" }

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

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

其他潜在问题：

您正在设置readonlyHTML 属性，但我不知道您为什么要这样做：

@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. 这应该会导致它使用 HTML5DateTime输入类型。jQuery-UI 处理文本框应该不会有任何问题，但它不会受到伤害。

@Html.EditorFor(x => x.Value, new { @class = "date" })
于 2013-05-23T17:26:49.100 回答
2

使用UIHint易于设置的 Datepicker

[UIHint("DateTime")]
[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:MM/dd/yyyy}", ApplyFormatInEditMode = true)]
[Display(Name = "Due Date")]
public Nullable<System.DateTime> Value{ get; set; }

在此路径Shared/EditorTemplates添加DateTime.cshtml文件

@model Nullable<System.DateTime>
@if (Model.HasValue)
{
    @Html.TextBox("", String.Format("{0:MM/dd/yyyy}", Model.Value), new { placeholder = "MM/DD/YYYY" })
}
else
{
    @Html.TextBox("", null, new { placeholder = "MM/DD/YYYY" })
}
@{
    string name = ViewData.TemplateInfo.HtmlFieldPrefix;
    string id = name.Replace(".", "_");
}
<script type="text/javascript">
    $(function () {
        $("#@id").datepicker({
            dateFormat: "mm/dd/yy"
        });
    });
</script>
于 2013-05-23T12:14:01.080 回答
0

作为一种解决方法，我在提交期间重新格式化文本框日期选择器的值，以便将其格式化回 mm/dd/yy。

$('#submit').submit(function() {

var dateTypeVar = $('#txtDateBirth').datepicker('getDate');
var oldFormat = $.datepicker.formatDate('mm/dd/yy', dateTypeVar);
                  $('#txtDateBirth').val(oldFormat);
});

当 postback mvc 现在能够知道格式时。

希望这可以帮助

于 2014-04-07T23:14:51.560 回答
0

您可以尝试注释您的视图模型属性，例如：

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yy}", ApplyFormatInEditMode = true)]
public DateTime? Value { get; set; }
于 2013-05-23T12:04:39.760 回答