web-dev-qa-db-ja.com

フィールドの日付は、mvcのchrome

カテゴリにいくつかのアイテムを追加できるシンプルなMVC4インターネットアプリケーションを実行しています。

ここに私がこれまでにしたことを示します。

MVCビューで日付ピッカーを使用しました。日付ピッカーのスクリプトは次のとおりです。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
    $(function () {
        $('#dtItemDueDate').datepicker({
            dateFormat: 'dd/mm/yy',
            minDate: 0
        });
    });
</script>

私のモデルのプロパティ：

        [DisplayName("Item DueDate")]
        [Required]
        [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",ApplyFormatInEditMode = true)]
        [DataType(DataType.DateTime)]
        public DateTime? dtItemDueDate { get; set; }
        public char charCompleted { get; set; }

私の見解では、これをやった：

@Html.TextBoxFor(m => m.dtItemDueDate)
@Html.ValidationMessageFor(m => m.dtItemDueDate)

エラーは次のようなものです。

The field Item DueDate must be a date.

奇妙なことに、IEおよびmozillaで動作しますが、Chromeでは動作しません。

SOに関する多くの投稿を見つけましたが、どれも役に立たない

何かアイデア/提案？

jqueryasp.net-mvcasp.net-mvc-4jquery-ui-datepicker
26
Karthik Chintala

編集者注：この回答は、jQuery 1.9（2013）の時点で無効になりました_$.browser_メソッドは削除されました

この投稿 によると、これはWebkitベースのブラウザーの既知の癖です。

1つの解決策は、関数date: function (value, element)を検索して_jquery.validate.js_を変更し、このコードをその中に入れることです：

_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));
}
_
30
Rowan Freeman

Jquery.validate.jsを変更せずに、以下のコードスニペットを$(document).ready()で使用できます。

jQuery.validator.methods.date = function (value, element) {
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    if (isChrome) {
        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));
    }
};
43
Mahesh

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

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));
},
8
Chtiwi Malek

以下は、誰かがchrome and safari：Model：

public DateTime? StartDate { get; set; }

見る：

@Html.TextBoxFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { @type = "text", @class = "fromDate" })

js：

$(function () {
    checkSupportForInputTypeDate();

    $('#StartDate').datepicker({        
        changeMonth: true,
        changeYear: true,
        dateFormat: 'dd/mm/yy'
    });    
});

//Function to configure date format as the native date type from chrome and safari browsers is clashed with jQuery ui date picker.
function checkSupportForInputTypeDate() {
    jQuery.validator.methods.date = function (value, element) {
        var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
        var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);
        if (isSafari || isChrome) {
            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));
        }
    };
}
7
KSK

Maxim Gershkovichの解 もう少し詳しく説明します。

jQuery.validator.methods.date = function (value, element) {
    if (value) {
        try {
            $.datepicker.parseDate('dd/mm/yy', value);
        } catch (ex) {
            return false;
        }
    }
    return true;
};

注：

  • これは、jQuery UIに付属の jQuery datepicker メソッドに依存します

  • これは実際、jQueryValidateに付属するネイティブの日付検証よりも堅牢です。

    日付検証 のドキュメントによると：

    値が有効な日付である場合、trueを返します。 JavaScriptの組み込みの日付を使用して、日付が有効かどうかをテストします。したがって、は健全性チェックを行いません。実際の日付ではなく、形式のみが有効である必要があります。たとえば、30/30/2008は有効な日付です。

    一方、 parseDate は、日付が有効で実際に存在することを確認します。

7
KyleMit

DateTimeからStringに変更することで、この問題を解決しました。

これは、現時点で考えられる優れたメンテナンスのための最良のソリューションです。

0
alansiqueira27