MVC4 DataType.Date EditorFor จะไม่แสดงค่าวันที่ใน Chrome, ดีใน Internet Explorer

ฉันกำลังใช้แอตทริบิวต์ DataType.Date กับรุ่นของฉันและ EditorFor ในมุมมองของฉัน สิ่งนี้ทำงานได้ดีในInternet Explorer 8และInternet Explorer 9แต่ในGoogle Chromeจะแสดงตัวใช้เลือกวันที่และแทนที่จะแสดงค่าเพียงแสดง "เดือน / วัน / ปี" ในข้อความสีเทาจาง

ทำไม Google 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>

เมื่อคุณตกแต่งคุณสมบัติของโมเดลด้วย[DataType(DataType.Date)]เทมเพลตเริ่มต้นใน ASP.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 เช่น Google 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; }

ใน MVC5.2 เพิ่ม Date.cshtml ไปยังโฟลเดอร์ ~ / 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)
}

นอกเหนือจากคำตอบของดารินดิมิทรอฟ:

หากคุณต้องการให้บรรทัดนี้เฉพาะใช้รูปแบบบางอย่าง (แตกต่างจากมาตรฐาน) คุณสามารถใช้ใน MVC5:

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

ใน MVC 3 ฉันต้องเพิ่ม:

using System.ComponentModel.DataAnnotations;

ระหว่างการใช้เมื่อเพิ่มคุณสมบัติ:

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

โดยเฉพาะถ้าคุณกำลังเพิ่มคุณสมบัติเหล่านี้ในไฟล์. edmx อย่างฉัน ฉันพบว่าโดยค่าเริ่มต้น. edmx ไฟล์ไม่ได้ใช้สิ่งนี้ดังนั้นการเพิ่มเพียงอย่างเดียวไม่เพียงพอ

หากคุณลบออก[DataType(DataType.Date)]จากแบบจำลองของคุณช่องป้อนข้อมูลใน Chrome จะแสดงผลเป็นtype="datetime"และจะไม่แสดง datepicker เช่นกัน

ฉันยังคงมีปัญหากับมันผ่านรูปแบบ 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"  })
}

ตอบกลับMVC4 DataType วันที่ EditorFor จะไม่แสดงค่าวันที่ใน 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)]

ที่ Date.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" })
    } 
}

มีความสุข! ขอแสดงความนับถือ Blerton

หากคุณต้องการควบคุมรูปแบบของวันที่ (กล่าวคือไม่ใช่รูปแบบ yyyy-mm-dd เป็นที่ยอมรับ) โซลูชันอื่นอาจเพิ่มคุณสมบัติตัวช่วยที่เป็นสตริงชนิดและเพิ่มตัวตรวจสอบวันที่ไปยังคุณสมบัตินั้น และเชื่อมโยงกับคุณสมบัตินี้บน 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;
    }
}