28

私は単純な 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に関する多くの投稿を見つけましたが、どれも役に立ちません

アイデア/提案はありますか？

4

6 に答える 6

30

編集者注: この回答は有効ではなくなりました。jQuery 1.9 (2013) 以降、$.browserメソッドは削除されました。

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

jquery.validate.js1 つの解決策は、関数を見つけて変更し、次の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));
}
于 2013-03-29T16:31:12.943 に答える
8

以下は、クロムとサファリの日付ピッカーの問題を修正するのに役立つ可能性のある作業コードです: モデル:

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));
        }
    };
}
于 2014-04-10T09:49:11.987 に答える
8

Rowan Freeman solution wont work for me since .toLocaleDateString(value) doesn't parse value strings

here's the solution i came up with => in jquery.validate.js find this function definition: "date: function (value, element)" and replace the code with:

// 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));
},
于 2013-07-31T10:56:18.077 に答える
7

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 の組み込み Date を使用して日付が有効かどうかをテストするため、サニティ チェックは行われません。実際の日付ではなく、形式のみが有効である必要があります。たとえば、30/30/2008 は有効な日付です。

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

于 2015-01-21T22:04:57.993 に答える