Comparte en Facebook Twitter Google+

datepicker-laravel-5-1

Existen muchos casos en donde tenemos que solicitar una fecha en un formulario y que mejor opción que un datepicker. Si, ese mini calendario que se despliega para ayudar al usuario a escribir la fecha deseada de una forma más cómoda.

Quiero mostrar como podemos colocar de forma sencilla y personalizada de utilizar bootstrap-datepicker en un formulario y asegurarnos que la información llega correctamente al controlador.

Muy bien, vamos a descargar los archivos del bootstrap-datepicker en la página oficial de bootstrap-datepicker sandbox, la cual además contiene un generador de datepicker con suficientes opciones para resolver cualquier requerimiento especial que pueda tener nuestro proyecto, el cual utilizaremos posteriormente.

Ahora sí, descomprimimos y colocamos las tres carpetas descargadas (localjs y css) en una capeta que vamos a crear con el nombre de datePicker en nuestro directorio public, para mantener el orden.

En la documentación oficial de este plugin nos mencionan que tiene como requerimiento:

Así que vamos a crear nuestra plantilla con todas las dependencias necesarias y un simple form:

En la carpeta resource/views  creamos un archivo llamado datepicker.blade.php con lo siguiente:

Nota: también como se observa hice la inclusión de los archivos anteriormente descargados.

Ahora, agregamos la rutas correspondientes en el archivo HTTP/routes.php :

Podemos ver nuestro formulario en la dirección:  http://nombre_de_tu_app/test/datepicker.

Bien, ahora sí volvamos a la página oficial de bootstrap-datepicker sandbox y generemos el código del datapicker con las configuraciones deseadas.

Notarán que al seleccionar alguna propiedad se modifica en la parte inferior el código  que vamos a copiar. Además se muestra un input que permite visualizar la configuración que le dimos.

Yo elegí la opción autoclose, cambié el formato de la fecha y elegí el lenguaje español, por lo cual me generó el siguiente código:

Solo por comodidad voy a cambiar la línea

por lo siguiente:

de esta forma cualquier input que tenga la clase datepicker funcionará.

Muy bien, nuestro código de la vista datepicker.blade.php completo quedaría de la siguiente forma:

Vamos a verificar que la información llega correctamente a nuestro controlador, para ello vamos a crear DateController con el comando:

Ahora, agregamos la rutas correspondientes en el archivo HTTP/routes.php :

Y el código de nuestro controlador únicamente para mostrar la información de la variable quedaría:

Podemos acceder nuevamente a nuestro formulario y verificar que funciona:

datepickers

Al hacer click en enviar, veremos que la fecha llega perfectamente a nuestro controlador:

date

Enlaces Relacionados

Espero les haya gustado y les sea útil. Recuerden comentar y compartir.

Regístrate hoy en Styde y continua mejorando tus habilidades: ver planes.

Lección anterior GitGutter para Sublime Text Lección siguiente Instalar PHP Code Sniffer en Sublime Text