MVC4数据类型。日期编辑器在Chrome中不会显示日期值,在Internet Explorer中很好

我正在使用数据类型。模型中的Date属性和视图中的EditorFor。这在Internet  Explorer  8Internet  Explorer  9中工作得很好,但在谷歌Chrome中它显示的是日期选择器,而不是显示值,它只显示灰色文本中的“月/日/年”。

为什么谷歌Chrome浏览器不显示该值?

模型:

[DataType(DataType.Date)]
public Nullable<System.DateTime> EstPurchaseDate { get; set; }

观点:

<td class="fieldLabel">Est. Pur. Date</td>
<td class="field">@Html.EditorFor(m=>m.EstPurchaseDate)</td>

Chrome

Internet Explorer

181346 次浏览

当你用[DataType(DataType.Date)]装饰一个模型属性时,在ASP. js中的默认模板。NET MVC 4生成一个type="date"的输入字段:

<input class="text-box single-line"
data-val="true"
data-val-date="The field EstPurchaseDate must be a date."
id="EstPurchaseDate"
name="EstPurchaseDate"
type="date" value="9/28/2012" />

支持HTML5的浏览器(如谷歌Chrome)使用日期选择器呈现此输入字段。

为了正确显示日期,该值必须格式化为2012-09-28。引用自规范:

值:在[RFC 3339]中定义的有效的完整日期 限定年份部分为四位或四位以上数字

.表示大于0的数字

你可以使用DisplayFormat属性强制这种格式:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public Nullable<System.DateTime> EstPurchaseDate { get; set; }

如果你从你的模型中删除[DataType(DataType.Date)], Chrome中的输入字段将被呈现为type="datetime",并且也不会显示数据选择器。

我仍然有一个问题,它传递格式yyyy-MM-dd,但我通过更改Date.cshtml绕过了它:

@model DateTime?


@{
string date = string.Empty;
if (Model != null)
{
date = string.Format("{0}-{1}-{2}", Model.Value.Year, Model.Value.Month, Model.Value.Day);
}


@Html.TextBox(string.Empty, date, new { @class = "datefield", type = "date"  })
}

在MVC 3中,我必须添加:

using System.ComponentModel.DataAnnotations;

添加属性时的用法:

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

特别是如果您像我一样在.edmx文件中添加这些属性。我发现默认情况下。edmx文件没有这个使用,所以只添加属性是不够的。

回复MVC4数据类型。日期编辑器在Chrome中不会显示日期值,在IE中没问题

在模型中,你需要有以下类型的声明:

[DataType(DataType.Date)]
public DateTime? DateXYZ { get; set; }

[DataType(DataType.Date)]
public Nullable<System.DateTime> DateXYZ { get; set; }

你不需要使用以下属性:

[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]

约会时。CSHTML使用这个模板:

@model Nullable<DateTime>
@using System.Globalization;


@{
DateTime dt = DateTime.Now;
if (Model != null)
{
dt = (System.DateTime)Model;


}


if (Request.Browser.Type.ToUpper().Contains("IE") || Request.Browser.Type.Contains("InternetExplorer"))
{
@Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class = "datefield", type = "date" })
}
else
{
//Tested in chrome
DateTimeFormatInfo dtfi = CultureInfo.CreateSpecificCulture("en-US").DateTimeFormat;
dtfi.DateSeparator = "-";
dtfi.ShortDatePattern = @"yyyy/MM/dd";
@Html.TextBox("", String.Format("{0:d}", dt.ToString("d", dtfi)), new { @class = "datefield", type = "date" })
}
}
< p >玩得开心! 问候, Blerton < / p >

在MVC5.2中,添加“日期”。到~/Views/Shared/EditorTemplates文件夹:

@model DateTime?
@{
IDictionary<string, object> htmlAttributes;
object objAttributes;
if (ViewData.TryGetValue("htmlAttributes", out objAttributes))
{
htmlAttributes = objAttributes as IDictionary<string, object> ?? HtmlHelper.AnonymousObjectToHtmlAttributes(objAttributes);
}
else
{
htmlAttributes = new RouteValueDictionary();
}
htmlAttributes.Add("type", "date");
String format = (Request.UserAgent != null && Request.UserAgent.Contains("Chrome")) ? "{0:yyyy-MM-dd}" : "{0:d}";
@Html.TextBox("", Model, format, htmlAttributes)
}

作为Darin Dimitrov的补充回答:

如果你只想让这一行使用某种(不同于标准的)格式,你可以在MVC5中使用:

@Html.EditorFor(model => model.Property, new {htmlAttributes = new {@Value = @Model.Property.ToString("yyyy-MM-dd"), @class = "customclass" } })

如果您需要控制日期的格式(换句话说,不只是yyyy-mm-dd格式是可接受的),另一种解决方案可能是添加一个string类型的helper属性,并向该属性添加一个日期验证器,并在UI上绑定到该属性。

    [Display(Name = "Due date")]
[Required]
[AllowHtml]
[DateValidation]
public string DueDateString { get; set; }


public DateTime? DueDate
{
get
{
return string.IsNullOrEmpty(DueDateString) ? (DateTime?)null : DateTime.Parse(DueDateString);
}
set
{
DueDateString = value == null ? null : value.Value.ToString("d");
}
}

这是一个日期验证器:

[AttributeUsage(AttributeTargets.Property, AllowMultiple = true, Inherited = true)]
public class DateValidationAttribute : ValidationAttribute
{
public DateValidationAttribute()
{
}


protected override ValidationResult IsValid(object value, ValidationContext validationContext)
{
if (value != null)
{
DateTime date;


if (value is string)
{
if (!DateTime.TryParse((string)value, out date))
{
return new ValidationResult(validationContext.DisplayName + " must be a valid date.");
}
}
else
date = (DateTime)value;


if (date < new DateTime(1900, 1, 1) || date > new DateTime(3000, 12, 31))
{
return new ValidationResult(validationContext.DisplayName + " must be a valid date.");
}
}
return null;
}
}