web-dev-qa-db-ja.com

Jquery Datepicker Chrome

JQuery UI Datepickerを使用する場合、Google Chromeで使用すると問題が発生します。12を超える日を入力すると、有効な日付として受け入れられません。これは、chrome =日付形式はmm/dd/yyyyであると考えています。日付設定をdd/mm/yyyyに強制するコードを追加することで、これを解決しようとしました。

$('.date').datepicker({ dateFormat: "dd/mm/yy" });

この問題を解決する方法はありますか？それで、datepickerはdd/mm/yyyy値を受け入れますか？この問題はGoogleChromeでのみ発生します。日付修正は、Firefox、つまり＆safariで機能します。このプロジェクトではASPXとMVC3を使用しています。

誰かが私たちの問題を解決できれば、それは素晴らしいことです

ありがとう

jqueryjquery-uiasp.net-mvc-3datetimepicker
25
Vince V.

私は同じ問題を抱えており、すべてのWebkitベースのWebブラウザーに関連しています。大文字のMを設定すると、テキストボックスに蛾が文字で表示されます。私にとって最善の解決策は、jquery.validate.jsの日付検証関数をオーバーライドすることでした。

Jquery.validate.date.jsを作成し、jquery.validate.jsの後に読み込まれるようにします

次のコードをjquery.validate.date.jsに追加します

$(function() {
    $.validator.methods.date = function (value, element) {
        if ($.browser.webkit) {

            //ES - Chrome does not use the locale when new Date objects instantiated:
            var d = new Date();

            return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
        }
        else {

            return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
        }
    };
});
46
user1011138

user1011138ソリューションは.toLocaleDateString(value)がvalue文字列を解析しないため、機能しません

これが私が思いついた解決策です=> jquery.validate.jsでこの関数定義を見つけます： "date：function（value、element）"そしてコードを次のように置き換えます：

// http://docs.jquery.com/Plugins/Validation/Methods/date
date: function (value, element) {
    var d = value.split("/");
    return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
},
26
Chtiwi Malek

デフォルトの「en-US」日付検証を「en-GB」日付検証でオーバーライドする必要があります。

  • 'en-US' => 'mm/dd/yy'
  • 'en-GB' => 'dd/mm/yy'

解決策：

プロジェクトに「jquery.validate.date.js」ファイルを追加し、その中に次のコードを配置します。

//To Fix jQuery date format 'en-GB' validation problem in Chrome
$(function () {
    $.validator.addMethod(
        "date",
        function (value, element) {
            var bits = value.match(/([0-9]+)/gi), str;
            if (!bits)
                return this.optional(element) || false;
            str = bits[1] + '/' + bits[0] + '/' + bits[2];
            return this.optional(element) || !/Invalid|NaN/.test(new Date(str));
        },
        "Please enter date in valid format [dd/mm/yyyy]"
    );
});

'jquery.validate.min.js'の後にロードされることを確認してください。

<script type="text/javascript" src="/Scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.date.js"></script>
4
mijaved

新しいjquery.validate.date.jsファイルを作成します。

次のコードをファイル内に貼り付けます。

 $(function () {
    $.validator.methods.date = function (value, element) {
      if ($.browser.webkit) {
        var d = new Date();
        return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value)));
      }
      else {
        return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
    }
  };
});

ここで、このファイルがjquery.validate.jsファイルの後にロードされていることを確認します。

4
Milan
 $.validator.methods.date = function (value, element) {                
            if ($.browser.webkit) {                    
                var d = value.split("/");   
                return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value));
              }
            else {
                return this.optional(element) || !/Invalid|NaN/.test(new Date(value));
            }
        };
3
Nayan Hodar

_jquery.validate.min.js Uncaught TypeError: Cannot read property 'webkit' of undefined. Exception occurred when checking element DateOfBirth, check the 'date'_をスローするjqueryブラウザチェックは非推奨であるため、上記のソリューションは機能しませんでした。

私のプロジェクトでは、 momentjs と bootstrap datetimepicker を使用しているので、このソリューションはうまく機能します。

_ $(function () {
    $.validator.methods.date = function (value, element) {
        return this.optional(element) || moment(value, 'DD/MM/YYYY').isValid();
  };
});
_

jquery.validate()をロードした直後にこれを呼び出します

3
Korayem