Kendo DatePicker未通過自定義日期格式驗證

Question

我正在使用Kendo DatePicker編輯在ASP.NET MVC 4項目中的Kendo網格中顯示的日期字段。爲了擁有的DatePicker正在使用的日期字段使用自定義日期格式字符串，我更新了Date.cshtml文件EditorTemplates文件夾下以下幾點：

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

通過這樣做，我設法擁有的DatePicker顯示格式，因爲我想要它。但是，通過手動鍵入或從彈出日曆中選擇，其輸入的某些日期的驗證失敗。

經過進一步調查，我可以說DatePicker正在驗證基於M/d/Y格式的日期。這個假設是基於我創建的，2012年12月1日是有效日期，而13/1/2012不是。

我也嘗試在Date.cshtml的DatePicker聲明的末尾添加.ParseFormat("dd/MM/yyyy")，但它沒有解決任何問題。所以我會說這絕對是一個bug，我會在稍後向Telerik報告。

但暫時，我正在尋找一個解決方法，使這項工作。我發現我可以覆蓋Javascript中的kendo.ui.validator.rules.mvcdate以擁有自己的驗證功能。儘管Chrome的這項工作很好，但它在IE9中不起作用。

那麼，我有什麼想法可以讓DatePicker接受dd/MM/yyyy輸入格式？提前致謝。

Answer 1

在內部，ASP.NET MVC的日期驗證規則（不引人注意的客戶端驗證）使用kendo.parseDate(string)方法，如果未定義任何格式，則內部將使用the predefined date patterns。我想你的情況默認文化是「en-US」，這就是爲什麼驗證失敗，因爲具有「dd/MM/yyyy」格式的日期被認爲是無效的。一種可能的解決方案是重寫日期驗證規則（如您所做的那樣）並使用特定格式解析字符串。另一個選項是爲頁面設置diff文化設置。 For instance, the short date format for the "de-DE" culture is "dd/MM/yyyy".

Answer 2

我改了日期的驗證規則：

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

我的格式是比你的略有不同，但你應該可以對此進行修改。

Answer 3

簡單的答案是不要使用自定義日期格式。只要總是明確地使用.Format（「MM/dd/yyyy」），並且不要使用「dd/MM/yyyy」（「yyyy-MM-dd」或「MMM d，yyyy」可能沒問題）。並將您的Web服務器設置爲在控制面板或Web.config中使用美國地區設置。

現在的問題，以及如何的解釋，實際上使DD/MM/YYYY工作：

劍道日期驗證使用默認的劍道文化的日期格式kendo.culture（）calendar.patterns.d（和。時間）。如果您直接設置或應用不同的文化，則會設置針對其進行驗證的日期格式。它使用kendo.parseDate，因此像「MMM d，yyyy」這樣的東西會很好，但是如果d> 12並且默認的美國文化正在被使用，那麼像「dd/MM/yyyy」這樣的東西將會失敗（參見kendo全球化演示切換文化）。

發生這種情況的原因是因爲DatePicker.Format（...）略有中斷。它是kendo.aspnetmvc.js中的一個錯誤，它提供了一個替代日期驗證函數，該函數忽略DatePicker格式並僅使用當前文化日期格式運行parseDate。這是固定的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; 
    }, 

此外，還有在日期驗證功能的小錯誤在kendo.validator.js/kendo.web.js這使得在Internet Explorer中電網日期驗證總是失敗。

此外，請確保您的Web服務器全球化設置爲美國以匹配劍道文化（在Web.config或Windows區域控制面板中）。 Firefox發佈MM/dd/yyyy，並且Web服務器需要與其匹配。此外，如果您未明確指定DatePicker.Format，則Web服務器區域日期格式將應用於所有客戶端瀏覽器。因此，如果您的Web服務器在Windows控制面板中設置了加拿大/英國日期格式，那麼kendo網格DatePickers默認爲dd/MM/yyyy，然後驗證錯誤並再次將Firefox發佈到Web服務器時（kendo默認文化在Firefox下發布MM/dd/yyyy，所以如果您的Web服務器預計爲dd/MM/yyyy，則mvc日期綁定失敗）。

注意：如果您更喜歡使用非mvc日期驗證程序：刪除data-val-date屬性。添加：data-type = \「date \」data-format = \「dd/MM/yyyy h：mm：ss tt \」。我相信這是不可能的使用HTML幫手。你必須直接指定html和javascript。

注意：由於缺少「data-val-date」屬性，非網格DatePickers似乎沒有驗證。 「請記住，KendoUI首先使用parseFormats選項來解析日期，然後將其轉換爲格式選項並最終運行驗證。這就是爲什麼我在驗證yyyy-MM-dd時使用而不是[」MM/dd/yyyy「，」dd/MM/yyyy「]。」 - How to validate a date is in the format yyyy-MM-dd using kendo validator?

的Web.config文件全球化線：

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

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

/添加腳本的document.ready功能/

 $(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; 
} 

}）;

Answer 5

我用這個方法，它工作正常..

在你的頁面添加這兩行..

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

然後覆蓋了jQuery日期驗證方法..

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

同時在我的Web.config我有這個...

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

Answer 6

當使用甘特組件here時，我遇到了同樣的問題。 Telerik支持通過將我引向here，讓我走上了正確的路線。

我的重要疏忽是，我沒有列入我_Layout.vbhtml文件中的以下內容：

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

一旦包括（在我的JS束適當kendo.culture腳本一起）助手開始表現爲預期。