Estou desenvolvendo uma aplicação e gostaria de colocar o campo de data que quando for clicado ele exibe um calendário para seleção neste estilo: datapicker, mas não sei como fazer.
2 Respostas
Vou colocar em passos.
jQuery UI
Verifique se o jQuery UI está instalado na sua solução. Abra o Package Manager Console (View > Other Windows > Package Manager Console) e digite:
PM> Install-Package jQuery.UI.Combined
Verifique se existe um Bundle pra ele (App_Start/BundleConfig.cs
):
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
Verifique se este Bundle está na View que terá o datepicker
ou então se ele está em Views/Shared/_Layout.cshtml
:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
Inicializando
Na View, adicione um script via @section
para inicializar o datepicker
:
@section scripts {
<script>
$(document).ready(function () {
$(".datepicker").datepicker({
autoclose: true,
format: "dd/mm/yyyy",
language: "pt-BR"
});
});
</script>
}
Isto faz com que tudo que esteja marcado com a classe datepicker
receba o comportamento visual de um datepicker
.
Esta parte será renderizada no layout onde estiver marcado o seguinte:
@RenderSection("scripts", required: false)
Inserindo Datepickers
O melhor componente pra inserir é o TextBoxFor
. É possível usar EditorFor
, mas não recomendo porque alguns comportamentos estranhos podem surgir:
@Html.TextBoxFor(model => model.Data, new { @class = "form-control datepicker", placeholder = "Minha Data" })
Fazendo este roteiro, o datepicker
deve funcionar.
Você pode usar HTML5, é bem simples
<input type="date">
PS: não compatível com o IE