当ASP.Net服务器端验证失败时,预输入的jqueryui datepicker "MM yy"格式日期无法渲染的问题,可能是由于以下原因导致的:
要解决这个问题,可以在页面加载时,检查ModelState.IsValid属性,如果为false,则需要手动初始化datepicker。
$(function () {
// 初始化datepicker
$("#datepicker").datepicker({
dateFormat: "MM yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
});
// 如果ModelState.IsValid为false,则手动设置datepicker的值
if (!@Html.Raw(Json.Encode(ViewData.ModelState.IsValid))) {
var dateValue = "@Html.Raw(Json.Encode(Model.DateValue))";
$("#datepicker").datepicker('setDate', new Date(dateValue));
}
});
要解决这个问题,可以在页面加载时,通过Model传递datepicker的值,并在初始化时设置datepicker的值。
$(function () {
// 初始化datepicker
var dateValue = "@Html.Raw(Json.Encode(Model.DateValue))";
$("#datepicker").datepicker({
dateFormat: "MM yy",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
onClose: function (dateText, inst) {
$(this).datepicker('setDate', new Date(inst.selectedYear, inst.selectedMonth, 1));
}
}).datepicker('setDate', new Date(dateValue));
});
这样,在服务器端验证失败后,即使页面重新加载,datepicker仍然能够正确渲染预输入的日期值。