¿Cómo agregar Date Picker Bootstrap 3 en el proyecto MVC 5 usando el motor Razor?

Necesito algunas pautas sobre cómo instalar un selector de fecha Bootstrap 3 en un proyecto MVC 5 usando el motor Razor. Encontré este enlace aquí pero no pude hacerlo funcionar en VS2013.

Copiando del ejemplo en el enlace posterior anterior, ya hice lo siguiente:

            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"));

Luego agregué el script a la vista de índice de la siguiente manera

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")

<script type="text/javascript">
    $('.datepicker').datepicker(); //Initialise any date pickers
</script>
}

Ahora, ¿cómo llamar al selector de fechas aquí?

   <div class="form-group input-group-sm">
    @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)
</div>

Esta respuesta usa jQuery UI Datepicker , que es una inclusión separada. Hay otras formas de hacer esto sin incluir jQuery UI.

Primero, simplemente necesita agregar la datepickerclase al cuadro de texto, además de form-control:

<div class="form-group input-group-sm">
    @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)
</div>

Luego, para asegurarse de que el javascript se active después de que se procese el cuadro de texto, debe colocar la llamada de datepicker en la función jQuery ready:

<script type="text/javascript">
    $(function () { // will trigger when the document is ready
       $('.datepicker').datepicker(); //Initialise any date pickers
    });
</script>

Esta respuesta simplemente aplica el type=dateatributo al inputelemento HTML y se basa en el navegador para proporcionar un selector de fecha. Tenga en cuenta que incluso en 2017, no todos los navegadores proporcionan su propio selector de fecha, por lo que es posible que desee proporcionar una alternativa.

Todo lo que tiene que hacer es agregar atributos a la propiedad en el modelo de vista. Ejemplo de variable Ldate:

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

Suponiendo que está usando MVC 5 y Visual Studio 2013.

Agregue solo estas dos líneas antes de la propiedad datetime en su modelo

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

y el resultado será:

Espero que esto pueda ayudar a alguien que se enfrentó a mi mismo problema.

Esta respuesta utiliza el complemento Bootstrap DatePicker , que no es nativo de bootstrap.

Asegúrese de instalar Bootstrap DatePicker a través de NuGet

Cree una pequeña parte de JavaScript y asígnele el nombre DatePickerReady.js, guárdelo en el directorio Scripts. Esto asegurará que funcione incluso en navegadores que no sean HTML5, aunque esos son pocos hoy en día.

if (!Modernizr.inputtypes.date) {
    $(function () {

       $(".datecontrol").datepicker();

    });
}

Establecer los paquetes

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"))

Ahora configure el tipo de datos para que cuando se use EditorFor, MVC identifique lo que se va a usar.

<Required>
<DataType(DataType.Date)>
Public Property DOB As DateTime? = Nothing

Su código de vista debe ser

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

y voilá

Intentando proporcionar una actualización concisa, basada en la respuesta de Enzero .

• Instale el paquete Bootstrap.Datepicker .

  PM> install-package Bootstrap.Datepicker
  ...
  Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...
  

• En AppStart / BundleConfig.cs , agregue los scripts y estilos relacionados en los paquetes.

  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"));
  

• En la vista relacionada, en la sección de scripts, habilite y personalice el selector de fechas.

  @section scripts{
      <script type="text/javascript">
          //...
          $('.datepicker').datepicker({
              format: 'dd/mm/yyyy', //choose the date format you prefer
              language: "YOUR-LOCALE-CODE-HERE",
              orientation: 'left bottom'
          });
      </script>
  

• Finalmente, agregue la clase datepicker en el control relacionado. Por ejemplo, en un TextBox y para un formato de fecha como "31/12/2018", esto sería:

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

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

decora tu modelo así. puede usar un selector de fecha y hora de arranque. Usé este. https://github.com/Eonasdan/bootstrap-datetimepicker/

Supongo que ya tienes paquetes para bootstrap css y js

Las entradas del paquete de selector de fechas

 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"));

Renderiza paquetes en tu vista de diseño

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

Tu HTML a la vista

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

Al final de su vista agregue esto.

<script>
    $(document).ready(function () {
        $('.datetimepicker').datetimepicker({
            format: 'lll'
        });
    });
</script>

1.Asegúrese de que ref jquery.js al principio
2.Compruebe el diseño, asegúrese de llamar a "~ / bundles / bootstrap"
3.Compruebe el diseño, vea la sección de renderizado Posición de los scripts, debe estar después de "~ / bundles / bootstrap"
4 .add clase "datepicker" al cuadro de texto
5.put $ ('. datepicker'). datepicker (); en $ (función () {...});

Selector de fecha de Checkout Shield UI para MVC . Un componente poderoso que puede integrar con algunas líneas como:

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

Simple:

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