我的模型类属性是这样的
public DateTime PurchaseDate { get; set; }
和内部视图
@Html.TextBoxFor(model => model.PurchaseDate, new { @class = "form-control date-picker" })
@Html.ValidationMessageFor(model => model.PurchaseDate)
,我在表格
中给出这样的日期19/06/2015
但是它给出验证消息,不允许提交页面,消息是这样的
The field PurchaseDate must be a date.
如果我给出mm/dd/yyyy
格式的日期,它可以工作。谁能指出我在这里做错了什么?
客户端错误正在发生,因为默认情况下jquery.validate
使用MM/dd/yyyy
格式测试值。您可以覆盖$.validator.addMethod('date', function (value, element)
函数来测试该值是否在您期望的dd/MM/yyyy
中。请注意,下面的代码来自我自己的jquery插件,它与一个@Html.DatePickerFor()
助手方法相关联,该方法根据服务器文化在输出中呈现一个data-dateformat
属性,因此对于您的需求来说,它可能是多余的
添加以下脚本(在document.ready
中不是,而是在jquery.validate.unobtrusive
之后)
Date.prototype.isValid = function () {
return !isNaN(this.getTime());
}
globalDate = function (value, formatString) {
// Initialise a new date
var date = new Date(0);
if (value == undefined) {
// Return todays date
return date;
}
// Get the components of the format
// The separator can be forward slash, hyphen, dot and/or space
var regex = new RegExp(/([dMy]+)([s/.-]+)([dMy]+)([s/.-]+)([dMy]+)/);
//var format = regex.exec(this.inputFormat);
var format = regex.exec(formatString);
// Get the components of the value
regex = new RegExp(/(d+)([s/.-]+)(d+)([s/.-]+)(d+)/);
value = regex.exec(value);
// Check the value is valid
if (value === null || value[2] !== format[2] || value[4] !== format[4]) {
// Its not valid
date.setTime(Number.NaN);
return date;
}
// TODO: What if year entered as 2 digits?
var day = Number.NaN;
var month = Number.NaN;
var year = Number.NAN;
if (format[1].charAt(0) === 'd') {
// little-endian (day, month, year)
day = parseInt(value[1]);
month = parseInt(value[3]) - 1;
year = parseInt(value[5]);
} else if (format[1].charAt(0) === 'M') {
// middle-endian (month, day, year)
day = parseInt(value[3]);
month = parseInt(value[1]) - 1;
year = parseInt(value[5]);
} else {
// big endian (year, month, day)
day = parseInt(value[5]);
month = parseInt(value[3]) - 1;
year = parseInt(value[1]);
}
date.setFullYear(year);
date.setMonth(month);
date.setDate(day);
// Check its valid
if (date.getDate() !== day || date.getMonth() !== month || date.getFullYear() !== year) {
date.setTime(Number.NaN);
return date;
}
return date;
}
$.validator.addMethod('date', function (value, element) {
var format = "dd/MM/yyyy";
return this.optional(element) || globalDate(value, format).isValid();
}
如果您只想测试dd/MM/yyyy
格式,那么您可以通过使用
globalDate()
函数var date = new Date();
date.setHours(0, 0, 0, 0);
var components = value.split('/');
var day = components[0];
var month = components[1];
var year = components[2];
date.setFullYear(year);
....
编辑
对于OP关于服务器端验证失败的评论,服务器区域性需要接受dd/MM/yyyy
格式的日期字符串。在web.config.cs
文件
<system.web>
<globalization culture="en-AU" uiCulture="en-AU"/> // adjust to your culture code
....
如果你想明确地为你的模型属性设置预期的日期格式,那么你可以使用DisplayAttribute
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
public DateTime PurchaseDate { get; set; }
否则,将使用服务器的当前区域性(在您的情况下恰好是MM/dd/yyyy
)。
似乎为了让客户端验证尊重DataFormatString
,我们需要使用EditorFor
来代替TextBoxFor
@Html.EditorFor(model => model.PurchaseDate, new { @class = "form-control date-picker" })
@Html.ValidationMessageFor(model => model.PurchaseDate)