3

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
  • Esta é a minha primeira aplicação, este código funciona perfeitamente em .net? 22/06/2015 às 18:01
  • Ok muito obrigado irei tentar 22/06/2015 às 18:15

2 Respostas 2

1

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.

1

Você pode usar HTML5, é bem simples

<input type="date">

PS: não compatível com o IE

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .