Cómo crear un Datepicker en MVC 5 con Bootstrap

En este artículo te contamos como crear de forma sencilla un Datepicker con Bootstrap en MVC 5.

SEO Blog 14

Actualizar jQuery a la versión 3.3.1 desde NuGet

Bootstrap 3.4.0 funciona con versiones de jQuery >= 1.9.1

Recomendamos utilizar la versión 3.3.1 por si quieren utilizarse otros componentes basados en JavaScript posteriormente.

Actualizar Bootstrap a la versión 3.4.0 desde NuGet

Primero vamos a actualizar la versión de Bootstrap desde Nuget.

Para Bootstrap 4 está disponible la versión 4.2.1 desde el 21 de diciembre de 2018.

Para Bootstrap 3 está disponible la versión 3.4.0 desde el 16 de diciembre de 2018.

Muchos desarrolladores están optando por trabajar en MVC con las versiones 3.x

Instalar el paquete "bootstrap.daterangepicker" desde NuGet

La información sobre este componente la puedes encontrar en la url: http://www.daterangepicker.com

En este ejemplo vamos a utilizar la versión v2.1.24.1

Bootstrap Datepicker 1

Al instalar el nuevo paquete podemos ver que se generan un archivo css y otro js:

Bootstrap Datepicker 2

Actualizar Bundle.config

El paquete bootstrap.daterangepicker también necesita la librería moment.js

Bootstrap Datepicker 3

Es necesario ampliar el archivo Bundle.config de la siguiente manera:

Bootstrap Datepicker 4

Crear input form-control de Bootstrap

Vamos a crear un input de tipo text desde el que lanzaremos la funcionalidad del datepicker.

Bootstrap Datepicker 5

Inicializar input form-control desde jQuery

La función daterangepicker() servirá para asociar al input la funcionalidad del datepicker

Bootstrap Datepicker 6

El resultado es el siguiente:

Bootstrap Datepicker 7

Existen un gran número de opciones para configurar el datepicker. En este ejemplo se ha mantenido el formato dd/MM/yyyy.

Todos los formatos y opciones de configuración se pueden consultar en http://www.daterangepicker.com/

Si tienes dudas o necesitas ayuda para integrar este componente puedes ponerte en contacto con nosotros. Estaremos encantados de ayudarte.

Miguel

Ingeniero en Informática | Arquitecto .NET

Experto en Desarrollo Web y consultoría SEO.

  miguel@amgrafic.com
  91 527 86 97

Sigue aprendiendo con nuestro Blog de SEO

Qué es Bootstrap

Bootstrap es un framework de desarrollo web que permite desarrollar interfaces atractivas y responsive.

Bootstrap 3.4.0

Nueva versión de Bootstrap. Tras una larga espera de más de 2 años, en este artículo te contamos las novedades sobre la versión 3.4.0

Tutorial SignalR ASP.NET MVC 5

¿Quieres crear un Chat en MVC? En este tutorial te explicamos como utilizar SignalR para desarrollar un Chat.