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

Posted 2023-02-22

【中文标题】该字段必须是日期 - Chrome 中的 DatePicker 验证失败 - mvc

【英文标题】：The field must be a date - DatePicker validation fails in Chrome - mvc

【发布时间】：2013-04-23 10:59:31

【问题描述】：

我有一个奇怪的问题。我的日期验证在 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>
);

更新2

毕竟它不起作用。有时它有效，有时无效。我在日期上点击了几次，有时验证通过了。对于同一日期，可能有好的和错误的验证。

这是日期字段的输出 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>

【问题讨论】：

可能重复：***.com/questions/5966244/jquery-datepicker-chrome

@DavidTansey - 这与我在第一段中给出的答案相同。我试过了，但还是一样。

对不起 dup / dup。

【参考方案1】：

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

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

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

【讨论】：

这根本不是解决办法，就像裤子破了就脱掉一样。客户不会高兴的 ;)

【参考方案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?

【讨论】：

感谢您的回答。一些有用的信息，+1。我发现问题在于它在局部视图内。当我在主页中复制代码时，一切正常。我在主视图中插入部分视图：@Html.Partial("_CreateOrEdit", Model)。您是否知道它在局部视图中时不起作用的原因是什么？

你的输出 HTML 是什么样子的？

我为日期部分添加了输出 HTML。奇怪的是，在同一天，有时有效，有时无效。

here 是另一个可行的解决方案，希望有所帮助。

【参考方案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); 

【参考方案4】：

一年后参加聚会有点晚了，但我已经尝试了所有我能找到的关于这个错误的解决方案，但都没有帮助。因此，对于像我这样苦苦挣扎的人来说，这就是解决这个问题的方法。

在 jquery.validate.globalize.js 及其缩小版本（取决于您使用的）的末尾添加这个小 sn-p 代码。

... 
   $.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");

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

希望对你有帮助！

【参考方案5】：

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

所以我把我的视图改成了这样：

<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>

希望对你有帮助。

【参考方案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"  )