Question

我有奇怪的问题。我的日期验证在Chrome中不起作用。我已经尝试this回答，但它对我不起作用。

我的模型中有这个：

[Display(Name = "Date")]
[DataType(DataType.Date)]
public DateTime Date { get; set; }

我的观点：

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
</div>

$(document).ready(function () {
    $('.picker').datepicker({
        dateFormat: 'dd.mm.yy',
        changeMonth: true,
        changeYear: true,
        selectOtherMonths: true
    });
});

一切都适用于Opera和Firefox，但Chrome不喜欢这种类型的日期。我经常收到以下错误The field 'Date' must be a date。

有什么想法吗？

更新

当代码在局部视图中时似乎存在问题。当我将该代码复制到主页面时，验证工作正常。

我正在我的主视图中插入局部视图，就像这样：

@Html.Partial("_CreateOrEdit", Model)

上面的代码在局部视图中：

@model Pro.Web.Models.Model

<div class="editor-field">
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)

$(document).ready(function () {
$('.picker').datepicker({
    dateFormat: 'dd.mm.yy',
    changeMonth: true,
    changeYear: true,
    selectOtherMonths: true
});

</script>
});

UPDATE2

它毕竟不起作用。有时它有效，有时不行。我在日期上点击了几次，有时候验证通过。对于同一天，可能会有正确的验证。

这是日期字段的输出html：

<div class="editor-field">
<input class="picker" data-val="true" data-val-date="The field Date must be a date." data-val-required="The Date field is required." id="date" name="Item.Date" type="text" value="1.1.0001. 0:00:00" />
<span class="field-validation-valid" data-valmsg-for="Item.Date" data-valmsg-replace="true"></span>
</div>

Answer 1

这里的情况完全相同（局部视图）

我通过删除验证属性并在服务器端执行验证来解决它：

$('#date').removeAttr("data-val-date");

Answer 2

在我看来，问题是MVC使用[type=date]生成日期HTML5输入。这导致chrome有效日期格式与系统日期格式相同。

您可以使用以下属性将MVC中的日期格式设置为与JqueryUI相同：

[DataType(DataType.Date), DisplayFormat( DataFormatString="{0:dd.MM.yy}", ApplyFormatInEditMode=true )]

第二个想法是使用文章中的代码：Creating a Native HTML 5 Datepicker with a Fallback to jQuery UI

还有一件事。在html输入中有一个关于日期的好主题：Is there any way to change input type="date" format?

Answer 3

我通过删除验证属性

解决了这个问题

@model Pro.Web.Models.Model

<div class="editor-field">
@{ Html.EnableClientValidation(false); }
@Html.TextBoxFor(model => model.Item.Date, new { @class = "picker" })
@Html.ValidationMessageFor(model => model.Item.Date)
@{ Html.EnableClientValidation(true); }

Answer 4

一年之后崩溃到派对有点迟了，但是我已经尝试了我能找到的关于这个错误的所有解决方案，而且没有一个能帮到你。所以对于像我这样挣扎的人来说，解决这个问题是什么。

添加到jquery.validate.globalize.js及其缩小版本（取决于您使用的是什么）这一小段代码的末尾。

... 
   $.validator.methods.range = function (value, element, param) {
        var val = Globalize.parseFloat(value);
        return originalMethods.range.call(this, val, element, param);
    };


}(jQuery, Globalize));

Globalize.culture("en-GB");

当然，请在引号内使用您自己的文化设置。

希望它有所帮助！

Answer 5

问题似乎与<input type="date" />（HTML5）有关，specification表示有效值定义为RFC3339。

所以我把我的View改成了这样的东西：

<script>
    $(function () {
         $("#validfrom").datepicker({
             altField: "#ValidFrom",
             altFormat: "yy-mm-dd"
         });
    });
</script>

<div class="editor-label">
    @Html.LabelFor(model => model.ValidFrom)
</div>
<div class="editor-field">
    <input id="validfrom" type="text" name="validfrom" />
    @Html.HiddenFor(model => model.ValidFrom)
    @Html.ValidationMessageFor(model => model.ValidFrom)
</div>

希望它有所帮助。

Answer 6

我有同样的错误。通过将datetime应用为类型来解决它，

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "datetime" } })

同样只使用时间

 @Html.EditorFor(model => model.LineResetAllowStartDate, new { htmlAttributes = new { @class = "form-control" ,  @type = "time" } })

该字段必须是日期 - Chrome中的DatePicker验证失败 - mvc

6 个答案: