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

Publicado em por

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

A [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 pensou em “ASP.Net MVC – Propriedade com o atributo DataType.Date não exibe valor na View”

  1. Muito boa essa dica, gostei muito. São detalhes que no dia a dia ajudam bastante. Parabens pelo post.

  3. 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…

    • Obrigado pelo feedback Lucas!

      Possivelmente você está tendo problemas devido as configurações regionais, sua data está em formato americano enquanto você digita e espera a validação no formato pt-BR.

      Quanto ao tradutor de mensagens eu não utilizo este recurso, para poder te ajudar mais precisaria dar uma olhada no código, me envie o trecho onde o problema ocorre e a mensagem de erro.

      [email protected]

      Abraços!

  4. 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

  6. 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!

    • Ele só vai gerar se o browser suportar, caso não será um campo texto apenas.
      *O IE trabalha da forma que ele bem entende rs.

      Dica: Use jQuery e garanta o funcionamento para todas plataformas.

      Abs.

  9. 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?

  11. 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.

  12. 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

  13. 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.

    • Junior, estou tendo o mesmo problema. Você conseguiu achar uma solução? Se sim e puder compartilhar, eu agradeço.

      Att,
      Paulo Junior

    • Olá Eduardo!! Parabéns pelo post, me ajudou muito, porém estou com o mesmo problema, existe alguma forma de contornar??

      Obrigado,
      Marcelo

    • Se alguém ainda tiver esse problema a minha solução foi trocar na View da Index o campo DsiplayFor, ex:

      @Html.DisplayFor(modelItem => item.DataCadastro)
      trocar por:
      @Convert.ToString(string.Format(“{0:dd/MM/yyyy}”,item.DataCadastro))

      *Tive que implementar o script jQuery-Globalize

  14. 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.

    • Desculpa me intrometer! Mas não seria melhor usar uma ViewBag ou dentro da View @{DateTime.Anything} ?

    • Utilize o DateTime.Now na controller, por exemplo! De uma explorada na funçãp DateTime e veja o que seria melhor pra ti!

  16. 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 ?

  18. Uma excelente explicação, rápida e direta! Muito obrigado, acredite que você mais do que me ajudou!

  21. 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”)]

Os comentários estão fechados.