該字段必須是日期 - Chrome中的DatePicker驗證失敗 - mvc

Question

我有奇怪的問題。 我的日期驗證在Chrome中不起作用。 我試過這個答案，但它對我不起作用。

我的模型中有這個：

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

有任何想法嗎？

UPDATE

當代碼在局部視圖中時，似乎存在問題。 當我將該代碼復制到主頁時，驗證工作正常。

我正在我的主視圖中插入局部視圖，就像這樣：

@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 )]

第二個想法是使用文章中的代碼： 使用回退到jQuery UI創建本機HTML 5 Datepicker

還有一件事。 在html輸入中有一個關於日期的好主題： 有沒有辦法改變輸入類型=“日期”格式？

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），因為規范說有效值被定義為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>

希望能幫助到你。

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" } })