MVC4 DataType.Date EditorFor tidak akan menampilkan nilai tanggal di Chrome, baik di Internet Explorer

Saya menggunakan atribut DataType.Date pada model saya dan EditorFor dalam pandangan saya. Ini berfungsi dengan baik di Internet Explorer 8 dan Internet Explorer 9 , tetapi di Google Chrome ini menunjukkan pemilih tanggal dan bukannya menampilkan nilai itu hanya menampilkan "Bulan / Hari / Tahun" dalam teks abu-abu pudar.

Mengapa Google Chrome tidak menampilkan nilai?

Model:

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

Melihat:

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

Ketika Anda menghias properti model dengan [DataType(DataType.Date)]templat default di ASP.NET MVC 4 menghasilkan bidang input 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" />

Browser yang mendukung HTML5 seperti Google Chrome membuat bidang input ini dengan pemilih tanggal.

Agar dapat menampilkan tanggal dengan benar, nilai harus diformat sebagai 2012-09-28. Kutipan dari spesifikasi :

nilai: Tanggal penuh yang valid sebagaimana didefinisikan dalam [RFC 3339], dengan kualifikasi tambahan bahwa komponen tahun adalah empat atau lebih digit yang mewakili angka lebih besar dari 0.

Anda dapat menerapkan format ini menggunakan DisplayFormatatribut:

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

Di MVC5.2, tambahkan Date.cshtml ke folder ~ / 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)
}

Sebagai tambahan untuk jawaban Darin Dimitrov:

Jika Anda hanya ingin baris khusus ini menggunakan format tertentu (berbeda dari standar), Anda dapat menggunakan di MVC5:

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

Di MVC 3 saya harus menambahkan:

using System.ComponentModel.DataAnnotations;

di antara usings saat menambahkan properti:

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

Terutama jika Anda menambahkan properti ini dalam file .edmx seperti saya. Saya menemukan bahwa secara default .edmx file tidak menggunakan ini sehingga menambahkan propeties saja tidak cukup.

Jika Anda menghapus [DataType(DataType.Date)]dari model Anda, bidang input di Chrome ditampilkan sebagai type="datetime"dan tidak akan menampilkan datepicker juga.

Saya masih memiliki masalah dengan itu meneruskan format yyyy-MM-dd, tapi saya mengatasinya dengan mengubah 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"  })
}

Membalas MVT4 DataType.Date EditorFor tidak akan menampilkan nilai tanggal di Chrome, baik di IE

Dalam Model, Anda harus memiliki jenis deklarasi berikut:

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

ATAU

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

Anda tidak perlu menggunakan atribut berikut:

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

Di Date.cshtml gunakan templat ini:

@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" })
    } 
}

Selamat bersenang-senang! Salam, Blerton

Jika Anda perlu memiliki kontrol atas format tanggal (dengan kata lain bukan hanya format tttt-tttt-tt dapat diterima), solusi lain dapat menambahkan properti pembantu yang bertipe string dan menambahkan validator tanggal ke properti itu , dan ikat ke properti ini di 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");
        }
    }

Dan ini adalah validator tanggal:

[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;
    }
}