Como adicionar o Date Picker Bootstrap 3 no projeto MVC 5 usando o mecanismo Razor?

Eu preciso de algumas diretrizes sobre como instalar um Date Booter Bootstrap 3 em um projeto MVC 5 usando o mecanismo Razor. Eu encontrei este link aqui, mas não consegui fazê-lo funcionar no VS2013.

Copiando do exemplo no link acima, eu já fiz o seguinte:

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/bootstrap-datepicker.js", // ** NEW for Bootstrap Datepicker "~/Scripts/respond.js")); bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/bootstrap-datepicker.css", // ** NEW for Bootstrap Datepicker "~/Content/site.css")); 

Então eu adicionei o script para a exibição de índice como segue

 @section Scripts { @Scripts.Render("~/bundles/jqueryval")  $('.datepicker').datepicker(); //Initialise any date pickers  } 

Agora, como chamar o selecionador de data aqui?

  
@Html.LabelFor(model => model.DropOffDate) @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control", placeholder = "Enter Drop-off date here..." }) @Html.ValidationMessageFor(model => model.DropOffDate)

Essa resposta usa o jQuery UI DatePicker , que é uma inclusão separada. Existem outras maneiras de fazer isso sem include a interface do usuário do jQuery.

Primeiro, basta adicionar a class datepicker à checkbox de texto, além form-control :

 
@Html.LabelFor(model => model.DropOffDate) @Html.TextBoxFor(model => model.DropOffDate, new { @class = "form-control datepicker", placeholder = "Enter Drop-off date here..." }) @Html.ValidationMessageFor(model => model.DropOffDate)

Então, para ter certeza de que o javascript é acionado após a renderização da checkbox de texto, você precisa colocar a chamada do datepicker na function pronta para jQuery:

  

Essa resposta simplesmente aplica o atributo type=date ao elemento de input HTML e depende do navegador para fornecer um selecionador de data. Tenha em atenção que, mesmo em 2017, nem todos os navegadores fornecem o seu próprio selecionador de datas, pelo que pode querer fornecer um retorno.

Tudo o que você precisa fazer é adicionar atributos à propriedade no modelo de visualização. Exemplo para a variável Ldate :

 [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] Public DateTime Ldate {get;set;} 

Supondo que você esteja usando o MVC 5 e o Visual Studio 2013.

Espero que isso possa ajudar alguém que foi confrontado com o mesmo problema.

Esta resposta usa o Plugin Bootstrap DatePicker , que não é nativo para o bootstrap.

Certifique-se de instalar o Bootstrap DatePicker através do NuGet

Crie um pequeno pedaço de JavaScript e nomeie-o com DatePickerReady.js e salve-o no diretório Scripts. Isso garantirá que funcione mesmo em navegadores que não sejam HTML5, embora sejam poucos hoje em dia.

 if (!Modernizr.inputtypes.date) { $(function () { $(".datecontrol").datepicker(); }); } 

Definir os pacotes

 bundles.Add(New ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/bootstrap-datepicker.js", "~/Scripts/DatePickerReady.js", "~/Scripts/respond.js")) bundles.Add(New StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/bootstrap-datepicker3.css", "~/Content/site.css")) 

Agora defina o tipo de dados para que quando o Editor for usado, o MVC identifique o que será usado.

   Public Property DOB As DateTime? = Nothing 

Seu código de visão deve ser

 @Html.EditorFor(Function(model) model.DOB, New With {.htmlAttributes = New With {.class = "form-control datecontrol", .PlaceHolder = "Enter Date of Birth"}}) 

e voila

insira a descrição da imagem aqui

Adicione apenas estas duas linhas antes da propriedade datetime no seu modelo

 [DataType(DataType.Date)] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] 

e o resultado será: Seletor de data no aplicativo MVC

 [DataType(DataType.Date)] public DateTime BirthDate { get; set; } 

Decore seu modelo assim. pode usar um selecionador de data e hora de bootstrap Eu usei este. https://github.com/Eonasdan/bootstrap-datetimepicker/

Eu suponho que você já tem pacotes para bootstrap css e js

Suas inputs no pacote selecionador de data

  bundles.Add(new ScriptBundle("~/bundles/datePicker").Include( "~/Scripts/moment.min.js", "~/Scripts/bootstrap-datetimepicker.min.js")); bundles.Add(new StyleBundle("~/Content/datepicker").Include( "~/Content/bootstrap-datetimepicker.min.css")); 

Renderizar pacotes na sua visualização de layout

 @Styles.Render("~/Content/datepicker") @Scripts.Render("~/bundles/datePicker") 

Seu HTML em vista

 
@Html.LabelFor(model => model.BirthDate, htmlAttributes: new { @class = "lead col-md-2" })
@Html.TextBoxFor(model => model.BirthDate, new { @class = "datetimepicker form-control" }) @Html.ValidationMessageFor(model => model.BirthDate, "", new { @class = "text-danger" })

No final da sua opinião, adicione isso.

  

1. certifique-se de refazer jquery.js no início
2.Verifique o layout, certifique-se de chamar “~ / bundles / bootstrap”
Layout 3.check, consulte a seção de renderização Scripts posição, deve ser depois de “~ / bundles / bootstrap”
4.add class “datepicker” para a checkbox de texto
5.put $ (‘. Datepicker’). Datepicker (); em $ (function () {…});

Tentando fornecer uma atualização concisa, com base na resposta do Enzero .

  • Instale o pacote Bootstrap.Datepicker .

     PM> install-package Bootstrap.Datepicker ... Successfully installed 'Bootstrap.Datepicker 1.7.1' to ... 
  • Em AppStart / BundleConfig.cs , adicione os scripts e estilos relacionados nos bundles.

     bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( //..., "~/Scripts/bootstrap-datepicker.js", "~/Scripts/locales/bootstrap-datepicker.YOUR-LOCALE-CODE-HERE.min.js")); bundles.Add(new StyleBundle("~/Content/css").Include( ..., "~/Content/bootstrap-datepicker3.css")); 
  • Na visão relacionada, na seção de scripts, ative e personalize o datepicker.

     @section scripts{  
  • Eventualmente, adicione a class datepicker no controle relacionado. Por exemplo, em um TextBox e para um formato de data no tipo “31/12/2018”, isso seria:

     @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" }) 

Selecionador de Data da UI do Checkout Shield para MVC . Um componente poderoso que você pode integrar com algumas linhas como:

 @(Html.ShieldDatePicker() .Name("datepicker")) 

Simples:

 [DataType(DataType.Date)] Public DateTime Ldate {get;set;}