web-dev-qa-db-ja.com

Kendo DatePickerがカスタム日付形式の検証に失敗する

私はKendo DatePickerを使用して、ASP.NET MVC 4プロジェクトのKendo Gridに表示されている日付フィールドを編集しています。 DatePickerを日付フィールドに使用してカスタム日付形式の文字列を使用するために、EditorTemplatesフォルダーの下の_Date.cshtml_ファイルを次のように更新しました。

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

そうすることで、DatePickerに希望どおりの形式を表示させることができました。ただし、手動のキー入力またはポップアップカレンダーからの選択により、入力用に入力された一部の日付の検証に失敗しました。

さらに調査すると、DatePickerは_M/d/Y_形式に基づいて日付を検証していると言えます。その仮定は、2012年1月1日は有効な日付であるのに対し、2012年1月13日は有効ではないという私の発見に基づいて行われました。

_Date.cshtml_のDatePicker宣言の最後に.ParseFormat("dd/MM/yyyy")を追加してみましたが、何も修正されていません。したがって、これは間違いなくバグであり、後でTelerikに報告します。

しかし、当分の間、私はこれを機能させるための回避策を探しています。 JavaScriptで_kendo.ui.validator.rules.mvcdate_をオーバーライドして、独自の検証関数を設定できることがわかりました。これはChromeでは正常に機能しますが、IE9では機能しません。

それで、DatePickerが_dd/MM/yyyy_入力形式を受け入れるようにする方法はありますか？前もって感謝します。

telerikasp.net-mvc-4kendo-ui
21
Amry

内部的には、ASP.NET MVCの日付検証ルール（控えめなクライアント検証）は kendo.parseDate（string） メソッドを使用し、内部では 事前定義された日付パターン を使用しますフォーマットが定義されていません。 「dd/MM/yyyy」形式の日付は無効と見なされるため、デフォルトのカルチャは「en-US」であり、検証が失敗するのはそのためだと思います。可能な解決策の1つは、日付検証ルールをオーバーライドして（以前と同様）、特定の形式を使用して文字列を解析することです。もう1つのオプションは、ページのdiffカルチャ設定を設定することです。 たとえば、「de-DE」カルチャの短い日付形式は「dd/MM/yyyy」です。

12
George K

私はこの方法を使用しており、問題なく機能しています。

これらの2行をページに追加します。

<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>
11
Rosdi Kasim
  [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;
}

}）;

4
user3119287

ガントコンポーネント here を使用するときにも同じ問題が発生しました。 Telerikのサポートにより、 here を参照することで、正しい説明が得られました。

私の重要な省略は、_Layout.vbhtmlファイルに以下を含めなかったことです。

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

（私のJSバンドルに含まれる適切なkendo.cultureスクリプトと共に）含まれると、ヘルパーは期待どおりに動作し始めました。

1
Richard Freeman

日付検証ルールを変更しました：

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

私のフォーマットはあなたのフォーマットと少し異なりますが、これを変更できるはずです。

1
J.P. Hamilton

簡単な答えは、カスタムの日付形式を使用しないことです。常に明示的に.Format（ "MM/dd/yyyy"）を明示的に実行し、 "dd/MM/yyyy"を使用しないでください（ "yyyy-MM-dd"または "MMM d、yyyy"でもかまいません）。また、コントロールパネルまたはWeb.configで米国の地域設定を使用するようにWebサーバーを設定します。

次に、問題の説明と、実際にdd/MM/yyyyを機能させる方法について説明します。

剣道の日付検証では、デフォルトの剣道文化の日付形式であるkendo.culture（）。calendar.patterns.d（および時間の場合は.t）を使用します。これを直接設定するか、別のカルチャを適用すると、検証される日付形式が設定されます。これはkendo.parseDateを使用するため、「MMM d、yyyy」のようなものは問題ありませんが、「dd/MM/yyyy」のようなものは、d> 12でデフォルトの米国の文化が使用されている場合、検証に失敗します（方法については、剣道のグローバリゼーションデモを参照してください。文化を切り替える）。

これが発生する理由は、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の地域のコントロールパネル）に一致するようにUSに設定されていることを確認してください。 FirefoxはMM/dd/yyyyを投稿し、Webサーバーはそれと一致する必要があります。また、DatePicker.Formatを明示的に指定しない場合、Webサーバーの地域の日付形式がすべてのクライアントブラウザーに適用されます。したがって、WebサーバーのWindowsのコントロールパネルでカナダ/イギリスの日付形式が設定されている場合、剣道グリッドのDatePickersはデフォルトでdd/MM/yyyyになり、検証時にエラーが発生し、FirefoxがWebサーバーに投稿すると（Firefoxの投稿でのKendoのデフォルトのカルチャ） 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」属性がないため、グリッド以外のDatePickerには検証がないようです。

また、「KendoUIは最初に日付の解析にparseFormatsオプションを使用し、次にそれをフォーマットオプションに変換して、最後に検証を実行することを思い出してください。これが検証でyyyy-MM-ddを使用し、["MM/dd/yyyy"ではありません」、 " dd/MM/yyyy "]。" - 日付を検証する方法は、剣道検証ツールを使用してyyyy-MM-ddの形式になっていますか？

Web.configのグローバリゼーション行：

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