A muchos les ha sido de mucha ayuda el poder agregar la funcionalidad de date picker o selector de fecha en un campo de formulario Divi (lo cual enseñamos en un tutorial anterior). Pero también muchos miembros me han preguntado si es posible agregarle un selector de horas. El servicio completo.
Y la respuesta es NO, con la librería que vimos en ese artículo anterior, no se puede. Peeeero, hay otra librería que SÍ que lo permite. Y además nos da la opción de mostrar la fecha y hora integradas, así como sólo fecha o sólo horas. Además de otras personalizaciones.
Hoy veremos cómo convertir cualquier campo del formulario de Divi en un selector de fecha y hora.

Preview de lo que vamos a lograr:

El artículo incluye una herramienta que nos generará el código necesario según nuestras preferencias, listo para copiar y pegar.

Identificación de Campo
Primero es importante tener claro que cada campo de un formulario de Divi, tienen una identificación.
Dentro del módulo formulario de Divi, puede verse (cómo en la imagen de abajo) los campos que lo componen. Si ingresamos a la configuración de un campo, haciendo click en el símbolo de la tuerca de la izquierda,..

… Entre las opciones veremos una que se llama: «identificacion del campo». Como dice su nombre, ésta es la forma como identificamos específicamente a cada campo.

En la herramienta que usaremos más abajo, te pedirán el nombre del campo al que deseas agregar el efecto de selección de fecha y hora. Así que ya sabes dónde ubicarlo 😉
Psst si te está gustando el artículo, éstos otros te van a encantar:
Agregando el código
Para que los campos de tu formulario tengan selectores de fecha y/o hora, necesitarás agregar dos códigos, el primero sirve para llamar a la librería javascript que hace posible el efecto, y el segundo (y más importante) es un script que definirá nuestras preferencias para el selector de fecha/hora y lo enlazará con el campo de nuestra elección.
Ambos códigos deberás copiarlos y pegarlos en un módulo código, dentro del diseño dónde esté tu formulario Divi. Luego guardas cambios y listo, ya verás el efecto de selector de fecha y hora. ¡Así de fácil!
El primer código es el siguiente:
Éste contenido está restringido sólo para usuarios con una membresía premium. Si cuentas con una, inicia sesión desde aquí y desbloquearás el contenido. Si no tienes una membresía, puedes adquirirla siguiendo el botón de abajo:
Generando el segundo código
El segundo código es un poco más complejo porque debemos personalizarlo con nuestras preferencias. Pero, aquí nos gusta engreír a nuestros miembros premium y darles todo masticado. Por eso he creado una herramienta dónde podrán ingresar fácilmente sus preferencias y luego, al hacer click al botón: Generar código, les aparecerá el código listo para copiar y pegar.

Utilizando la herramienta
Lo primero que les pedirá es que ingresen el «identificador del campo» que desean transformar. Esto es importante, para que el código sepa a quién va a afectar.
Luego podrán elegir si desean que se muestre un selector de fecha y hora juntos, un selector de sólo fecha o un selector de sólo horas. (¿No es genial?)
Luego podrán elegir una fecha mínima seleccionable y una fecha máxima seleccionable, así como una hora mínima seleccionable y una hora máxima seleccionable. Y por último qué intervalo (en minutos) desean que tengan las horas mostradas.
Al final, solo deben hacer click al botón «Generar Código» y tendrán el código 2 personalizado listo para copiar y pegar.

Herramienta generadora del segundo Código
Éste contenido está restringido sólo para usuarios con una membresía premium. Si cuentas con una, inicia sesión desde aquí y desbloquearás el contenido. Si no tienes una membresía, puedes adquirirla siguiendo el botón de abajo:
Aplicando el efecto a diferentes campos
Puedes utilizar la herramienta para generar el código 2 para todos los campos que desees. Luego copias y pegas el codigo generado, uno debajo de otro en un módulo código de Divi. Y ya tendrás el efecto en todos los campos que elegiste.
Por otro lado, el código 1, sólo es necesario que se copie y pegue una sola vez por diseño.
Cabe mencionar, que si tienes varios formularios en un mismo diseño, verifica que cada campo tenga un «identificador del campo» único y no se repita.
Seguro que éstos otros artículos también te encantarán:
No se encontraron postsUn ejemplo en vivo de cómo se ve el efecto
Hagan click al campo «Seleccionar fecha y hora» y verán cómo la magia ocurre.
0 comentarios