MVC4 DataType.Date EditorFor, Chrome'da tarih değerini görüntülemez, Internet Explorer'da iyi


198

Benim modelde DataType.Date özniteliğini ve benim görüşüme göre bir EditorFor kullanıyorum. Bu iyi çalışıyor Internet Explorer 8 ve Internet Explorer 9 , fakat içinde Google Chrome'da bir tarih seçici gösteriyor ve değeri görüntülemek yerine soluk gri metinde "Ay / Gün / Yıl" görüntülüyor.

Google Chrome değeri neden göstermiyor?

Model:

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

Görünüm:

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

Krom

Internet Explorer

Yanıtlar:


378

Bir model özelliğini [DataType(DataType.Date)]ASP.NET'teki varsayılan şablonla dekore ettiğinizde MVC 4 aşağıdakilerin giriş alanını oluşturur 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" />

Google Chrome gibi HTML5'i destekleyen tarayıcılar bu giriş alanını bir tarih seçiciyle oluşturur.

Tarihi doğru bir şekilde görüntülemek için, değer olarak biçimlendirilmelidir 2012-09-28. Şartname alıntı :

değeri: [RFC 3339] 'da tanımlanan geçerli bir tam tarih, ek olarak yıl bileşeninin 0'dan büyük bir sayıyı temsil eden dört veya daha fazla basamak olması.

Şu biçimi kullanarak bu biçimi uygulayabilirsiniz DisplayFormat:

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

44
Darin teşekkür ederim, bu mükemmeldi! Geçtiğimiz iki yıl içinde MVC sorularımın çoğuna cevap verdiniz, sallayın!
Ben Finkel

3
Harika cevap ama bunun sadece kontrolün düzgün çalışması için zorlamak zorunda olduğunuzu çekici olduğunu hissediyorum!
Coops

7
İşaretli tüm özellikler için bu "küresel" yapmanın yolu ne olurdu, bu [DataType(DataType.Date)]yüzden tüm bu özellikleri ayrı olarak bazı eksik risk ile işaretlemek zorunda kalmazdım?
Marjan Venema

7
Darin, ABD dışındaki insanlar neler yapabilir? Teknik özellik değerini nasıl ayarlayabilir, ancak özel bir tarih biçimi görüntüleyebilirim? yani İngiltere?
Piotr Kula

3
@ MarjanVenema- Matt Honeycutt'ın FailTracker'ından ( github.com/MattHoneycutt/Fail-Tracker ) "ExtensibleModelMetadataProvider" ı kullandım . ModelMetadata'nın Altyapı Klasörü altına bakın. Bu sınıfları kullandım ve sonra IModelMetadataFilter'ın bir filtre uygulamasını oluşturdum. TransformMetadata yöntemi çağrıldığında, meta verilerin "DisplayFormatString" ve "EditFormatString" özelliklerini düzenleyebilirsiniz. Umarım bu sizi doğru yöne götürür (btw, Fail-Tracker kullanan harika bir çoğul görüş videosu vardır)
SwampyFox

44

MVC5.2'de Date.cshtml dosyasını ~ / Views / Shared / Editor klasörüne ekleyin.

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

Teşekkürler! bahsedilen krom "sorununu" düzeltir ve elbette datetime özelliğinizde başka bir displayformat olabilir!
cmxl

Evet harika bir çözüm. Bu, ABD'de olmayanlar için mükemmel bir çalışma sağlar.
Richard McKenna

Bu sorunun en iyi çözümü olduğunu düşünüyorum, sadece editör sorununu çözer ve mevcut ekran biçimlendirmesini etkilemez.
dsghi

1
"DateTime.cshtml" yerine "Date.cshtml" kullanmak sihirli bir yanıttı! MVC 4'te de çalışır.
Atron Seige

Harika! Obrigado.
Guilherme de Jesus Santos

16

Darin Dimitrov'un cevabına ek olarak:

Bu satırın yalnızca belirli (standarttan farklı) bir biçim kullanmasını istiyorsanız, MVC5'te kullanabilirsiniz:

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

Bulunmadığından @başında, o @Value = @Model.Property...hala ihtiyaç @? Sadece new { Value = Model.Property...mi demek istiyorsun ?
user3454439

11

MVC 3'te eklemek zorunda kaldım:

using System.ComponentModel.DataAnnotations;

özellikler eklerken kullanıcılar arasında:

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

Özellikle bu özellikleri benim gibi .edmx dosyasına ekliyorsanız. Ben varsayılan olarak .edmx dosyaları sadece propeties eklemek yeterli kullanarak kullanarak bu olmadığını bulundu.


10

[DataType(DataType.Date)]Modelinizden kaldırırsanız Chrome'daki giriş alanı, tarih seçici olarak da oluşturulur type="datetime"ve gösterilmez.


Teşekkürler Bernie. Verilerin giriş kutusuna konulmadığı gibi, seçicinin gösterilmesinde sorun yaşamadım. Bunu bilmek güzel.
Ben Finkel

Opera olsa da bir tarih seçici oluşturur. Bazı çok amaçlı yapmak için modernizr kullanın
cleftheris

1
Bir tarih olması gerekiyorsa, bir tür girdi olarak işlenmelidir date. datetimeVerileri anlamsal olarak temsil etmediğinden, geçici çözüm olarak kullanmak uygun değildir.
Chris Pratt

4

Hala yyyy-AA-gg biçimini geçen bir sorun vardı, ancak Date.cshtml değiştirerek etrafında var:

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

teşekkür ederim nihayet bu çalıştı, format string.Format("{0}/{1}/{2}")almaya çalıştım dd/mm/yyyyve iyi çalışıyor, ben ilk yöntem veritabanı kullandım ama DisplayFormat kısmi sınıf ile çalışmadı, neden bilmiyorum ?, neyse gerekirse herkes bu yöntemi deneyin , ben yapmadım t deneyin ama kimse gerekiyorsa, yardımcı olur umut
shaijut

3

Yanıt IE tarih Chrome'da değeri, para cezası göstermez MVC4 DataType.Date EditorFor

Modelde aşağıdaki beyan türüne sahip olmanız gerekir:

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

VEYA

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

Aşağıdaki özelliği kullanmanıza gerek yoktur:

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

Date.cshtml dosyasında bu şablonu kullanın:

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

İyi eğlenceler! Saygılarımızla, Blerton


Bu şekilde yaparsanız Chrome size bir tarih seçici vermez. Çözümünüzü kullanıyorum, ancak değiştiriyorum ki 1) DisplayFormatözniteliği kullanıyorum 2) Tarayıcı türünün krom olup olmadığını kontrol etmek için testi değiştirin, sonra @Html.EditorFor(m=>m.EstPurchaseDate)3 yapın) Else do @Html.TextBox("EstPurchaseDate", dt.ToString("MM/dd/yyyy"))Not: # 2, tarayıcı HTML5'i anlıyor, ancak bunu nasıl yapacağımı bilmiyorum.
David

4
Sunucu tarafı kodunda tarayıcı algılaması için aşağı oylama.
Tetsujin no Oni

1

Tarih biçimi üzerinde denetime sahip olmanız gerekiyorsa (başka bir deyişle, yalnızca yyyy-aa-gg biçimi kabul edilebilir değil), başka bir çözüm, string türünde bir yardımcı özellik eklemek ve bu özelliğe tarih doğrulayıcı eklemek olabilir ve kullanıcı arayüzündeki bu mülke bağlanın.

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

Ve işte bir tarih doğrulayıcı:

[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;
    }
}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.