Das Feld muss ein Datum sein - DatePicker-Validierung schlägt in Chrome fehl - mvc

Question

Ich habe seltsames Problem. Meine Datumsüberprüfung funktioniert in Chrome nicht. Ich habe versucht this Antwort, aber es hat nicht für mich funktioniert.

Ich habe dies in meinem Modell:

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

Meine Ansicht:

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

Alles funktioniert in Opera und Firefox, aber Chrome nicht über diese Art von Datum mag. Ich bekomme ständig den folgenden Fehler The field 'Date' must be a date.

Irgendwelche Ideen?

UPDATE

Es scheint, dass es ein Problem ist, wenn der Code in einer Teilansicht ist. Wenn ich diesen Code auf eine Hauptseite kopiere, funktioniert die Validierung einwandfrei.

Ich bin Einfügen Teilansicht in meinem Hauptansicht einfach wie folgt aus:

@Html.Partial("_CreateOrEdit", Model) 

Und das obige Code ist in einer Teilansicht:

@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

Es funktioniert schließlich nicht. Manchmal funktioniert es, manchmal nicht. Ich habe ein paar Mal auf Termine geklickt und manchmal die Gültigkeitsprüfung bestanden. Für das gleiche Datum könnte eine gute und eine falsche Validierung vorliegen.

Dies ist Ausgabe html für Datumsfeld:

<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

Meiner Meinung nach Probleme ist, dass MVC mit [type=date] für Datum HTML5 Eingang erzeugt. Dies führt dazu, dass in Chrome das gültige Datumsformat dem Systemdatumsformat entspricht.

Sie können sich wahrscheinlich einstellen Datumsformat in MVC üblich zu sein mit jQueryUI mit folgenden Attribut:

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

Die zweite Idee ist Code von Artikel zu verwenden: Creating a Native HTML 5 Datepicker with a Fallback to jQuery UI

Eine weitere Sache. Es ist ein gutes Thema über Datum in html-Eingang: Is there any way to change input type="date" format?

Answer 2

Das Problem scheint mit <input type="date" /> (HTML5) zu sein, wie specification sagt, dass gültige Wert als RFC3339 definiert ist.

Also änderte ich meine Ansicht zu etwas wie folgt aus:

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

Hoffe, es hilft.

Answer 3

Exakt die gleiche Situation hier (Teilansicht)

Ich löste es durch die Validierung Attribut zu entfernen und führe Validierung auf Server-Seite:

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

Answer 4

Es ist eine Art spät, um die Partei zu einem Absturz nach ein Jahr, aber ich habe jede Lösung ausprobiert, die ich in Bezug auf diesen Fehler finden konnte, und keiner von ihnen hat geholfen. Also für jeden, der wie ich hier kämpft, ist das, was dieses Problem gelöst hat.

Fügen Sie am Ende von jquery.validate.globalize.js und seiner verkleinerten Version (hängt davon ab, was Sie verwenden) dieses kleine Codeschnipsel.

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

Natürlich Ihre eigene Kultur Einstellungen in Anführungszeichen verwenden.

Hoffe es hilft!

Answer 5

ich es gelöst, indem die Überprüfung Entfernen Attribut

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

ich den gleichen Fehler hatte. Gelöst es von Datetime als Typ Anwendung

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

ähnlich Zeit für nur

Zeit verwenden

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