カテゴリにいくつかのアイテムを追加できるシンプルな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に関する多くの投稿を見つけましたが、どれも役に立たない
何かアイデア/提案?
編集者注:この回答は、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));
}
_
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));
}
};
.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));
},
以下は、誰かが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));
}
};
}
Maxim Gershkovichの解 もう少し詳しく説明します。
jQuery.validator.methods.date = function (value, element) {
if (value) {
try {
$.datepicker.parseDate('dd/mm/yy', value);
} catch (ex) {
return false;
}
}
return true;
};
注:
これは実際、jQueryValidateに付属するネイティブの日付検証よりも堅牢です。
日付検証 のドキュメントによると:
値が有効な日付である場合、trueを返します。 JavaScriptの組み込みの日付を使用して、日付が有効かどうかをテストします。したがって、は健全性チェックを行いません。実際の日付ではなく、形式のみが有効である必要があります。たとえば、30/30/2008は有効な日付です。
一方、 parseDate
は、日付が有効で実際に存在することを確認します。
DateTimeからStringに変更することで、この問題を解決しました。
これは、現時点で考えられる優れたメンテナンスのための最良のソリューションです。