Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Formatação campo tipo data no HTML Helper

Como formatar o campo tipo data no HTML Helper?

Exemplo código abaixo, gera um input do tipo text, gostaria que fosse no formato de data, abrindo um calendário para escolha do dia.

    @Html.LabelFor(m => m.Data, "Data")
    @Html.TextBoxFor(m => m.Data, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Data)

Se eu usar:

<input type="date">

O calendário funciona apenas no Chrome, existe alguma solução que funcione em qualquer navegador?

1 resposta
solução!

Olá Danilo,

O input type date veio no HTML5, até por isso não são todos os navegadores que suportam. Uma outra forma de fazer que funciona em todos os navegadores é com javascript usando o datepicker do JQuery UI.

Já para usar o input type date com o Razor, tem duas formas de fazer. A mais simples é colocando justamente o tipo do input da mesma forma que você passou a classe. O problema é que você também precisa formatar a data para o padrao que o tipo date entende que é de ano-mes-dia.

@Html.TextBoxFor(m => m.Data, "{0:yyyy-MM-dd}", new { @class = "form-control", @type="date" })

Só que toda vez que for usar datas teria que repetir esse código. Outra forma é você anotando a propriedade que você quer que seja uma data com a DataType dizendo que é uma data e um DisplayFormat para justamente passar a formatação ano-mes-dia. E depois usar o @Html.EditorFor do Razor no cshtml, que pelas anotações ele já vai entender que é para fazer o input date no formato certo. Aqui tem um link do stackoverflow que te dá a ideia de como faz isso.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software