ASP.Net MVC – Propriedade com o atributo DataType.Date não exibe valor na View

Propriedade na Model decorada com o DataAnnotation [DataType(DataType.Date)] ao ser criada na View através do @Html.EditorFor não exibe os dados gravados no banco.

Essa é uma dica rápida mas que pode lhe poupar algum tempo, o cenário abordado resulta em um problema muito comum de ocorrer e será detalhado aqui como solucionar.

Em uma classe Model possuímos uma propriedade que representa uma data, estamos utilizando DataAnnotation para definir alguns comportamentos.

public class MeuModelo
{
    [Display(Name = "Data de Retorno")]
    [DataType(DataType.Date, ErrorMessage="Data em formato inválido")]
    public DateTime? DataRetorno { get; set; }
}

Note que está sendo utilizado o atributo [DataType(DataType.Date)] para definir a forma que este dado será validado na View.

Por tratar-se de uma solução ASP.Net MVC, muito provavelmente será utilizado o HtmlHelper (Razor) para facilitar a criação do controle na View.

    <div>
        @Html.LabelFor(model => model.DataRetorno)
        @Html.EditorFor(model => model.DataRetorno)
        @Html.ValidationMessageFor(model => model.DataRetorno)
    </div>

Ao chamar a View teremos uma surpresa, o campo além de estar criado, tornou-se um DatePicker, fantástico não?

ASP.Net MVC DatePicker

Esse é um recurso do ASP.Net MVC para browsers que suportam HTML5, logo se o seu browser possui esse suporte você terá acesso a este recurso.

Até neste momento tudo está funcionando perfeitamente até que chega o momento em que este campo data irá exibir um dado já gravado (ex banco de dados).
A data não aparece, o campo continua tendo o mesmo aspecto, como se não tivesse sido preenchido.

Você debuga o código, valida o preenchimento da model e o dado está la populado. Que problema é esse? É neste momento que entra a dica:

Para exibir corretamente a data, o valor deve ser formatado como AAAA-MM-DD

[RFC 3339] definida pelo W3C diz o seguinte:

“A valid full-date as defined in [RFC 3339], with the additional qualification that the year component is four or more digits representing a number greater than 0.”

Ou seja, é necessário formatar este campo data para adequar o seu funcionamento.
Caso a página estiver sendo exibida em um browser sem suporte a HTML5 o problema não ocorrerá, porém de qualquer forma necessita ser tratado, afinal todos os browsers atuais possuem esse suporte.

Para corrigir o problema será usado o atributo DisplayFormat, uma classe do DataAnnotations que especifica como que um dado dinamicamente criado deve ser exibido.

public class MeuModelo
{
    [Display(Name = "Data de Retorno")]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:yyyy-MM-dd}")]
    [DataType(DataType.Date, ErrorMessage="Data em formato inválido")]
    public DateTime? DataRetorno { get; set; }
}

O formato da composição da string deve ser exatamente como está exibido no exemplo.
Ao testar a View percebemos o resultado, funcionou e agora está exibindo o dado gravado.

ASP.Net MVC DatePicker

Caso você tenha problema com o formato da exibição da data, talvez seja necessário utilizar os scripts jQuery Globalize para adequação do formato para a cultura do idioma da página.

Espero que essa dica possa ajudar, qualquer dúvida poste nos comentários abaixo 😉

38 ideias sobre “ASP.Net MVC – Propriedade com o atributo DataType.Date não exibe valor na View

  1. Legal Eduardo!! Era bem isso que eu estava precisando!!

    Mas agora surgiu uma outra falha.
    O campo Data não está sendo considerado um formato válido ao cadastrar ou editar.
    Imagino que possa ser devido ao tradutor das mensagens que instalei via Nuget (“Microsoft.AspNet.Mvc.pt-br”).
    Será que você saberia me dizer o pq deste problema?
    Talvez alguma dica pra fazer as traduções e não afetar as validações e formatos das datas.

    Agradeço desde já!!
    Abraço…

  2. Minha aplicação trabalha com Multi-região, e passei pelo problema.

    Para resolver, eu criei um EditorTemplate Date.cshtml com o seguinte conteúdo:

    @using MeuProjeto.Resources
    @model Nullable
    @{
    string dateTime = String.Empty;
    if (Model.HasValue) {dateTime = ((DateTime)Model).ToString(meuResource.DataFormatString);}
    }
    @Html.TextBox(“”, dateTime)

    meuResource.resx => DataFormatString: “MM/dd/yyyy”
    meuResourse.pt.resx => DataFormatString: “dd/MM/yyyy”

    Assim, dependendo das configurações regionais, o Resource irá fazer o formato correto para validar no campo EditorFor tipo DataType.Date

    #ficadica

  3. Eduardo, como posso gerar o DatePicker se meu site precisar rodar em browser que não suporta HTML5.
    O estranho é que eu testei com o IE11 e não apareceu. Já no Chrome deu certo.
    Obrigado!

  4. Eduardo,

    Quando vou exibir os “detalhes”, a data salva aparece no formato yyyy-MM-dd. Como faço para ela aparecer dd/MM/yyyy na view de detalhes?

  5. Trabalho para uma Empresa Pública com Desenvolvimento MVC. Fiz seu exemplo mas a validação ,quando isiro a data, ela informa que não e Data. E como se eu tivesse informado algo que não do tipo Data entendeu. Tem alguma dica para resolver isso Eduardo.

  6. Olá Eduardo,

    Existe alguma maneira de não aparecer esse calendário?

    Eu preciso utilizar o DataType(DataType.Date), mas quero remover esse calendário para utilizar outro.

    obrigado

  7. Eduardo segui seu exemplo, mais tem um detalhe estou usando o mvc 5 dessa forma que vc explicou no index o formato data data aparece “yyyy-MM-dd” e no edit aparece no formato “dd/MM/yyyy” fica confuso mostrar um formato e depois outro. Outro detalhe é que se mudo o formato no dataannotation para “dd/Mm/yyyy” o formato e exibido no index mais no edit os valores não são exibidos.

  8. Bom dia Eduardo..

    Primeiramente adorei o post, me salvou na hora de formatar a data.
    Contudo gostaria de saber como recuperar o valor escolhido nessa data através de JQuery..
    Fiz algo do tipo:

    @Html.EditorFor(model => model.DTINICIO, new { @id = “DtInicio” })

    e depois tentei recuperar o valor da seguinte forma:
    var dtInicio = $(“#DtInicio”).val();
    ou
    var dtInicio = $(“#DtInicio”).text();
    ou
    var dtInicio = $(“#DtInicio”).Editor();
    mas em todos eles ou recebo o valor undefined ou então “”.

    Sabe me dizer como recuperá-lo?
    Muito obrigada.

  9. Ola Eduardo
    Quando eu vou editar o cadastro de cliente a data de nascimento vem sem a data que ta cadastrada no banco. Oque eu posso fazer para manter esses dados ?

  10. Eu estou passando pelo seguinte problema: se você digitar uma data inválida, a mensagem de erro que vai aparecer é uma mensagem padrão do .net e não a mensagem que você configurou no data annotation:
    [DataType(DataType.Date, ErrorMessage=”Data em formato inválido”)]

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *