Necesito algunas líneas de guía sobre cómo instalar un Selector De Fecha Bootstrap 3 en un MVC 5 proyecto de uso de la maquinilla de Afeitar del motor. He encontrado este enlace aquí pero no podía hacer que funcione en VS2013.

Copiando el ejemplo en el posterior enlace de arriba ya he hecho 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 he añadido el script a la vista de índice como siga

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

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

Ahora, cómo llamar a la fecha del selector de 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>
  • Por favor, muéstranos tu cshtml/maquinilla de Afeitar de código que están trabajando con los que no funciona. Gracias
  • Gracias por la respuesta. He actualizado mi post en consecuencia
  • Voy a fuego VS y ver si puedo averiguarlo!
  • ¿El uso de NuGet para agregar los archivos o ¿agregarlos manualmente ?
  • waqar ahmed es por lejos la solución más simple.
InformationsquelleAutor Ben Junior | 2014-01-14

9 Comentarios

  1. 75

    Esta respuesta se utiliza el jQuery UI Datepicker, que es incluyen. Hay otras maneras de hacer esto sin incluir jQuery UI.

    Primer lugar, usted simplemente necesita agregar el datepicker de la clase en el 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 código javascript se activa después de que el cuadro de texto se representa, usted tiene que poner el selector de fecha de la llamada en la función ready de jQuery:

    <script type="text/javascript">
        $(function () { //will trigger when the document is ready
           $('.datepicker').datepicker(); //Initialise any date pickers
        });
    </script>
    • Sí, esto es exactamente lo que tengo mi código de derecho ahora y no funciona
    • Esta es la razón por la que yo uso la Fundación! Tengo la misma cosa que hacer, he intentado ‘@class = «form-control datepicker»‘ & ‘@class = «datepicker form-control» y no dados
    • Si, por casualidad, está llamada en una vista parcial, el script debe estar en la página de Índice o no va a funcionar si es que la vista parcial. Este fue también uno de los problemas solucionados
    • Puedo automatizar la máquina de Afeitar de manera que si hay [DataType(DataType.Date)] se define en un campo se debe agregar automáticamente la datepicker clase de css y ejecutar el js?
    • Cuando el uso de JS/JQ dentro de Vistas Parciales, me he encontrado con Forloop HtmlHelpers realmente útil. Esto hace que sea mucho más fácil mantener los scripts dentro de EditorTemplates y DisplayTemplates, así como en la estándar, Vistas Parciales. No es perfecto en todos los escenarios, pero me ha ayudado a resolver un montón de problemas similares a este.
    • Trabajó para mí, gracias.
    • El MVC 5 plantillas que tengo en Visual Studio 2015 no incluyen la interfaz de usuario JQuery, así que estoy bastante seguro de que usted tiene que instalar y de referencia que primero antes de que esto va a funcionar. Hay una buena discusión con los enlaces a los tutoriales: forums.asp.net/t/…
    • Mismo un @EricB aquí. Esto sólo dosn no trabajo a partir de la ir. ¿Por qué maquinilla de afeitar no tiene ningún selector de fecha en que es objeto Html ? Por qué navegador moderno como firefox y borde dosn no un simple <input type=»fecha»> ….

  2. 51

    Esta respuesta, simplemente se aplica la tipo=fecha atributo para el HTML input elemento y se basa en el navegador para el suministro de un selector de fecha. Tenga en cuenta que incluso en el 2017, no todos los navegadores proporcionan su propio selector de fecha, por lo que puede proporcionar una caída de nuevo.

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

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

    Asumiendo que usted está utilizando MVC 5 y Visual Studio 2013.

    • Esta es LA MEJOR respuesta! Es allí cualquier manera de escoger la hora y la fecha? [DataType(DataType.DateTime)] public DateTime BirthDate { get; set; } no funciona para mí.
    • La solución más simple es aquí
    • Esa NO es la respuesta correcta! Que la solución sólo permiten navegador calendarios específicos aparecen en el explorador de campos de fecha. Que no tiene nada que ver con Bootstrap Datetime plugin.
    • Es allí una manera de que yo pueda utilizar esta para la selección de mes. Normal cuadro de texto en bootstrap type=»mes». Cómo hacer esto con las anotaciones de datos?
    • Gran respuesta. Sí, no tiene nada que ver con bootstrap, ya que ¿por qué molestarse con bootstrap cuando usted puede agregar esto a su tipo de datos.
    • Esto no funciona con IE 11 y FF 38. Sólo Chrome va a recoger esto.
    • El otro problema con esta solución es que al editar el campo de la fecha, acabo de ver «mm/dd/aaaa» en lugar de la fecha valor que ya existe.
    • Pfff, chrome única solución, hasta que cada navegador tiene su propio selector de fecha
    • Lo que pasa en la Vista? @Html.DisplayFor(model => model.DateFrom) sólo muestra la fecha como una cadena. Mediante el uso de Chrome btw
    • Lo consiguió – @Html.EditorFor(model => model.DateFrom)

  3. 18

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

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

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

    Crear un pequeño trozo de código JavaScript y el nombre DatePickerReady.js guardar en secuencias de comandos dir. Esto se asegurará de que funciona incluso en los navegadores HTML5 aunque son pocos hoy en día.

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

    Conjunto de 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 establece el Tipo de datos, de modo que cuando EditorFor se utiliza MVC identificar lo que se va a utilizar.

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

    La vista de código debe ser

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

    y voila

    Cómo agregar Selector de Fecha Bootstrap 3 en MVC 5 proyecto de uso de la maquinilla de Afeitar del motor?

    • P. S. – Establecer los paquetes en BundleConfig.cs archivo en la carpeta App_Start.
    • Donde se actualiza la parte que dice <Necesario> <Tipo de datos(Tipo de datos.Fecha)> Público de la Propiedad fecha de NACIMIENTO Como DateTime? = Nada
    • Este parece ser VB.NET para aquellos tirando de los pelos. Trató de convertir a c#, pero no importa lo que he intentado no hizo nada.
    • Sí, aquí mismo – no podía hacer que funcione para C#.
  4. 14

    Añadir estas dos líneas antes de la propiedad datetime en su modelo de

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

    y el resultado será :Cómo agregar Selector de Fecha Bootstrap 3 en MVC 5 proyecto de uso de la maquinilla de Afeitar del motor?

    • Pero usted va a usar en la Vista? Traté de TextBoxFor pero aún así es un cuadro de texto
    • Este método sólo funciona en algunos navegadores como chrome.
    • Es decir se producirá la solución !
  5. 6

    El intento de proporcionar una breve actualización, basada en Enzero‘s respuesta.

    • Instalar el Bootstrap.Selector de fecha paquete.

      PM> install-package Bootstrap.Datepicker
      ...
      Successfully installed 'Bootstrap.Datepicker 1.7.1' to ...
    • En AppStart/BundleConfig.cs, añadir los relacionados con los scripts y estilos de 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 los relacionados con la vista, en los guiones de’ sección, habilitar y personalizar selector de fecha.

      @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 agregar el datepicker clase en el control relacionados. Por ejemplo, en un cuadro de texto y un formato de fecha en el como de «31/12/2018» esto sería:

      @Html.TextBox("YOUR-STRING-FOR-THE-DATE", "{0:dd/MM/yyyy}", new { @class = "datepicker" })
    • Hola, ¿cómo hacer de este un rango de fecha, es decir, el usuario debe elegir dos fechas de & a
  6. 4
    [DataType(DataType.Date)]
    public DateTime BirthDate { get; set; }

    decorar tu modelo como este.
    puede utilizar un bootstrap fecha hora selector he usado este.
    https://github.com/Eonasdan/bootstrap-datetimepicker/

    Supongo que usted ya tiene paquetes para el bootstrap css y js

    Su selector de fecha paquete de entradas

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

    Procesar paquetes en su Vista de Diseño

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

    El código HTML en 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 para agregar esto.

    <script>
        $(document).ready(function () {
            $('.datetimepicker').datetimepicker({
                format: 'lll'
            });
        });
    </script>
    • Por favor, considere la posibilidad de que el tipo de entrada «fecha» (establecida por el Tipo de datos.Fecha) solo es compatible con Chrome, Safari y Opera ahora (como se puede ver aquí: w3schools.com/html/html_form_input_types.asp).
    • He actualizado la respuesta con el uso de bootstrap fecha de selector de hora.
  7. 3

    1.asegúrese de que usted ref jquery.js en primer

    2.verificar el diseño,asegúrese de llamar «~/bundles/bootstrap»

    3.verificar el diseño,consulte la sección procesamiento de Scripts de posición,debe ser después «~/bundles/bootstrap»

    4.agregar la clase «datepicker» cuadro de texto

    5.poner $(‘.selector de fecha’).datepicker(); en $(function(){…});

Dejar respuesta

Please enter your comment!
Please enter your name here