2012-07-24 4 views
21

Ich verwende Kendo DatePicker, um ein Datumsfeld zu bearbeiten, das in einem Kendo-Grid in meinem ASP.NET MVC 4-Projekt angezeigt wird. Um die Datepicker zu haben, für die Verwendung benutzerdefinierte Datumsformat-Zeichenfolge Datumsfeld verwendet wird, aktualisiert ich die Date.cshtml Datei unter dem EditorTemplates Ordner auf die folgenden:Kendo DatePicker schlägt Validierung für benutzerdefiniertes Datumsformat fehl

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy")) 

Dadurch, dass es mir gelungen, zeigt das Datepicker zu haben, die formatieren, wie ich es möchte. Die Validierung für einige der eingegebenen Daten für die Eingabe ist jedoch fehlgeschlagen, entweder über die manuelle Eingabe oder die Auswahl aus dem Popup-Kalender.

Nach weiterer Untersuchung kann ich sagen, dass der DatePicker das Datum auf der Grundlage eines M/d/Y Formats überprüft. Diese Annahme wurde basierend auf meinen Ergebnissen gemacht, dass 12/1/2012 ein gültiges Datum ist, während 13/1/2012 nicht gültig ist.

Ich habe auch versucht, .ParseFormat("dd/MM/yyyy") an das Ende der DatePicker-Deklaration in Date.cshtml hinzuzufügen, aber es repariert nichts. Ich würde also sagen, dass dies definitiv ein Fehler ist und ich werde dies später Telerik melden.

Aber vorerst suche ich nach einem Workaround, damit das funktioniert. Ich finde, dass ich kendo.ui.validator.rules.mvcdate in Javascript überschreiben kann, um meine eigene Validierungsfunktion zu haben. Während dies in Chrome funktioniert, funktioniert es in IE9 nicht.

Also, irgendwelche Ideen, wie kann ich den DatePicker akzeptieren dd/MM/yyyy Eingabeformat? Danke im Voraus.

+3

Haben Sie jemals darüber berichtet oder in den Kendo Foren darüber gepostet? –

Antwort

12

Intern verwendet die Datumsüberprüfungsregel für ASP.NET MVC (die unauffällige Clientvalidierung) die Methode kendo.parseDate(string), die intern the predefined date patterns verwendet, wenn kein Format/s definiert ist. Ich nehme an, dass in Ihrem Fall die Standardkultur "en-US" ist und deshalb die Validierung fehlschlägt, da Daten mit dem Format "TT/MM/JJJJ" als ungültig betrachtet werden. Eine mögliche Lösung besteht darin, die Gültigkeitsregel für das Datum zu überschreiben (wie Sie es getan haben) und die Zeichenfolge unter Verwendung eines bestimmten Formats zu analysieren. Die andere Option besteht darin, Diff-Kultureinstellungen für die Seite festzulegen. For instance, the short date format for the "de-DE" culture is "dd/MM/yyyy".

+2

Das hat bei mir funktioniert. Aber ich würde es gerne besser haben, wenn die Kendo MVC-Implementierung nicht undokumentiertes magisches Zeug auf die Standard-Kendo-Javascript-Bibliothek bringt. – Amry

+1

Kendo UI Validator unterstützt die unauffällige Validierung von ASP.NET MVC nicht standardmäßig. Aus diesem Grund müssen Sie die Datei kendo.aspnetmvc.js einbeziehen, die zusätzliche Validierungsregeln enthält. Ich denke nicht, dass das magisches Zeug ist. Wir werden definitiv die Dokumentation über die Kendo MVC Validierung verbessern. –

1

änderte es das Datum Gültigkeitsregel:

$.validator.methods.date = function (value, element) { 
    return this.optional(element) || /^\d\d?-\w\w\w-\d\d\d\d/.test(value); 
}; 

Mein Format etwas anders als bei Ihnen, aber Sie sollten diese in der Lage zu ändern.

+0

Ihre Lösung funktioniert nicht für mich. '$.Validator "ist nicht definiert und der darin enthaltene Code wird nicht ausgelöst. Ich glaube nicht, dass Kendo JQuerys Validator benutzt. – Amry

+0

Kendo UI hat einen eigenen Validator. Es ist nicht jQuery Validate. Überprüfen Sie diesen Link - http://demos.kendoui.com/web/validator/index.html –

0

Die einfache Antwort ist, verwenden Sie kein benutzerdefiniertes Datumsformat. Mach einfach immer .Format ("MM/TT/JJJJ") explizit und verwende nicht "TT/MM/JJJJ" ("JJJJ-MM-TT" oder "MMM TT, JJJJ" könnte in Ordnung sein). Stellen Sie Ihren Webserver in der Systemsteuerung oder in Web.config für die Verwendung von US-Ländereinstellungen ein.

nun für eine Erklärung des Problems und wie man tatsächlich dd/MM/yyyy Arbeit machen: (und

Kendo Datum Validierung verwendet den Standard Kendo Kultur Datumsformat kendo.culture() calendar.patterns.d. .t für Zeit). Wenn Sie dies direkt festlegen oder eine andere Kultur anwenden, wird damit das zu validierende Datumsformat festgelegt. Es verwendet kendo.parseDate, so dass etwas wie "MMM d, yyyy" in Ordnung ist, aber etwas wie "dd/MM/yyyy" wird nicht validiert, wenn d> 12 und die Standard-US-Kultur verwendet wird (siehe kendo Globalization Demo für wie Kulturen wechseln).

Der Grund dafür ist, dass DatePicker.Format (...) leicht beschädigt ist. Es ist ein Fehler in kendo.aspnetmvc.js, der eine alternative Datumsüberprüfungsfunktion bereitstellt, die das DatePicker-Format ignoriert und parseDate nur mit dem aktuellen Kulturdatumsformat ausführt.Dies ist die feste javascript:

date: function(input) { 
     var dp = input.data("kendoDatePicker") || input.data("kendoDateTimePicker"); 
     if (dp != undefined) { 
      return input.val() === "" || kendo.parseDate(input.val(), dp.options.format) !== null; 
     } 

     return input.val() === "" || kendo.parseDate(input.val()) !== null; 
    }, 

Außerdem gibt es einen kleinen Fehler in der Funktion Datum Validator in kendo.validator.js/kendo.web.js das Datum Validierung auf Gitter in Internet Explorer macht immer fehl.

Stellen Sie außerdem sicher, dass die Globalisierung des Webservers auf US gesetzt ist, damit sie der Kendo-Kultur entspricht (in Web.config oder in der Windows-Systemsteuerung). Firefox posten MM/TT/JJJJ und der Webserver muss dazu passen. Außerdem wird das regionale Datumsformat des Webservers auf alle Clientbrowser angewendet, wenn Sie DatePicker.Format nicht explizit angeben. Wenn also auf Ihrem Webserver das kanadische/britische Datumsformat im Control Panel für Windows eingestellt ist, ist der kendingraster DatePickers standardmäßig auf TT/MM/JJJJ eingestellt, dann der Fehler in der Validierung und erneut, wenn Firefox auf den Webserver verweist (kendo Standardkultur unter Firefox-Posts) MM/TT/JJJJ, wenn Ihr Webserver dd/MM/JJJJ erwartet, schlägt die Bindung von mvc-Daten fehl.

Hinweis: Wenn Sie den nicht-mvc-Datumsvalidierer verwenden möchten: Entfernen Sie das Attribut data-val-date. Add: Datentyp = \ "Datum \" Datenformat = "TT/MM/JJJJ H: MM: SS Tt \". Ich glaube, das ist mit dem HTML-Helfer nicht möglich. Sie müssen das HTML und Javascript direkt angeben.

Hinweis: Nicht-Grid-DatePicker scheinen keine Validierung zu haben, da das Attribut "data-val-date" fehlt.

Auch: "Denken Sie daran, dass KendoUI zuerst parseFormats Option zum Parsen des Datums verwendet, dann konvertiert es in die Formatoption und schließlich Validierungen. Deshalb verwende ich in Validierung yyyy-MM-dd und nicht [" MM/dd/JJJJ "," TT/MM/JJJJ "]." - How to validate a date is in the format yyyy-MM-dd using kendo validator?

Globalisierung Linie für Web.config:

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-US" uiCulture="en-US" /> 
+0

Fast für mich gelöst .. in error_handler sendet mir eine Fehlermeldung über das Datumsformat - [Der Wert '12/24/2013 12:00:00 AM 'ist nicht gültig für die
.] Mein Format ist dd/MM und ich haben ein @ (Html.Kendo(). DatePickerFor (m => m) .Format ("{0: dd/MM}")) –

4
[DataType(DataType.Date)] 
    [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)] 
    [Required(ErrorMessage = "Pick a date from Kendo Date Picker")] 
    public DateTime mydate{ get; set; } 

    @(Html.Kendo().DatePickerFor(m=>m.mydate) 
       .Name("MyDate") 
       .Format("dd/MM/yyyy") 
       .ParseFormats(new string[] {"dd/MM/yyyy"})) 

/hinzufügen Skript document.ready Funktion/

 $(document).ready(function() { kendo.culture("en-GB"); 

     $.validator.methods['date'] = function (value, element) { 
    var check = false; 
    var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/; 
    if (re.test(value)) { 

     var adata = value.split('/'); 
     var dd = parseInt(adata[0], 10); 

     var mm = parseInt(adata[1], 10); 
     var yyyy = parseInt(adata[2], 10); 
     var xdata = new Date(yyyy, (mm - 1), dd); 

     if ((xdata.getFullYear() == yyyy) && (xdata.getMonth() == (mm - 1)) && 
      (xdata.getDate() == dd)) { 

      check = true; 
     } 
     else { 
      alert(value); 
      check = false; 
     } 

    } else 
     check = false; 
    return this.optional(element) || check; 
} 

});

7

Ich benutze diese Methode und es funktioniert gut ..

Fügen Sie diese beiden Zeilen in Ihre Seite ..

<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script> 

dann die jQuery Datum Validierungsmethode außer Kraft setzen ..

<script> 
    $(document).ready(function() { 
     kendo.culture("en-MY"); //your culture 
     $.validator.addMethod('date', 
      function (value, element) { 
       return this.optional(element) || kendo.parseDate(value) 
      }); 
    }); 
</script> 

Inzwischen in meinem Web.config habe ich dies ...

<system.web> 
    <globalization uiCulture="en-MY" culture="en-MY"></globalization> 
</system.web> 
+0

Ich verwende die Globalisierung nicht in web.config. Aber Ihr Lösungsskript funktioniert gut mit wenig Änderung: 'kendo.parseDate (Wert," TT/MM/JJJJ ")'. füge das gewünschte Format zu 'kendo.parseDate' hinzu und es funktioniert. – Issac

+0

Danke, das funktioniert für mich. –

1

Ich hatte das gleiche Problem bei der Verwendung der Gantt-Komponente here. Die Telerik-Unterstützung hat mich auf den richtigen Weg gebracht, indem sie mich an here verwiesen hat.

Meine entscheidende Auslassung war, dass ich die folgend in meiner _Layout.vbhtml Datei nicht enthalten war:

<script> 
kendo.culture("en-GB"); 
</script> 

einmal enthalten (mit dem entsprechenden kendo.culture Skript zusammen in meinem JS Bündel) der Helfer als begänne verhalten erwartet.