it-swarm.com.de

Das Feld muss ein Datum sein - DatePicker-Überprüfung schlägt in Chrome - mvc fehl

Ich habe ein seltsames Problem. Meine Datumsüberprüfung funktioniert in Chrome nicht. Ich habe versucht diese Antwort, aber es hat bei mir nicht funktioniert.

Ich habe das in meinem Modell:

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

Meine Sicht:

<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 mag diese Art von Datum nicht. Ich erhalte ständig den folgenden Fehler The field 'Date' must be a date

Irgendwelche Ideen?

UPDATE

Es scheint, dass ein Problem vorliegt, wenn sich der Code in einer Teilansicht befindet. Wenn ich diesen Code auf eine Hauptseite kopiere, funktioniert die Überprüfung einwandfrei.

Ich füge eine Teilansicht in meine Hauptansicht ein:

@Html.Partial("_CreateOrEdit", Model)

Und der obige Code befindet sich 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 doch nicht. Manchmal funktioniert es, manchmal nicht. Ich habe ein paar Mal auf Datumsangaben geklickt und manchmal Validierungspässe. Für den gleichen Tag könnte es eine gute und falsche Bestätigung geben. 

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

Genau die gleiche Situation hier (Teilansicht)

Ich habe es gelöst, indem ich das Validierungsattribut entfernt und auf Serverseite validiert habe:

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

Meiner Meinung nach ist es problematisch, dass MVC für Datum HTML5-Eingabe mit [type=date] generiert. Dies hat zur Folge, dass das gültige Datumsformat in Chrome mit dem Datumsformat des Systems identisch ist.

Sie können das Datumsformat in MVC wahrscheinlich so einstellen, dass es mit JqueryUI gemeinsam ist, indem Sie folgendes Attribut verwenden:

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

Die zweite Idee ist die Verwendung von Code aus dem Artikel: Native HTML 5-Datepicker mit einer Fallback für die jQuery-Benutzeroberfläche erstellen

Eine Sache noch. In der html-Eingabe gibt es ein gutes Thema zum Datum: Gibt es eine Möglichkeit, den Eingabetyp = "Datum" -Format zu ändern?

11
Piotr Stapp

Ich habe es gelöst, indem ich das Validierungsattribut entfernt habe 

@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); }
5
István

Es ist schon spät, nach einem Jahr zur Party zu stürzen, aber ich habe jede Lösung ausprobiert, die ich in Bezug auf diesen Fehler finden konnte, und keine von ihnen hat geholfen. Für jeden, der hier mit mir zu kämpfen hat, ist es das, was dieses Problem gelöst hat.

Fügen Sie am Ende von jquery.validate.globalize.js und seiner verkleinerten Version (je nachdem, was Sie verwenden) diesen kleinen Codeausschnitt hinzu.

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

Verwenden Sie natürlich Ihre eigenen Kultureinstellungen in Anführungszeichen.

Ich hoffe es hilft!

2
chassis

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

Also habe ich meine Ansicht in etwas geändert:

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

Ich hoffe es hilft.

1
Hubo

Ich hatte den gleichen Fehler. Gelöst, indem datetime als Typ angewendet wurde,

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

genauso Zeit für nur Zeit verwenden

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