Continuamos con la temática de los formularios de contacto en Divi…
Recordemos que en el anterior artículo vimos cómo crear y configurar uno, además de un súper truco para saber desde qué URL se enviaba el mensaje. Puedes ver ese artículo desde aquí:
El Módulo formulario de contacto de Divi nos ofrece una gran variedad de tipos de campos que podemos utilizar. Pero, no hay uno especializado en mostrar un selector de fecha. Al menos no de forma nativa.
Peeero si Mahoma no va a montaña, la montaña va a Mahoma. Y si Divi no nos da esa opción, nosotros se la damos a Divi.

En la imagen de abajo pueden ver la hermosura que vamos a conseguir. Cuando nuestros usuarios hagan click en el campo, aparecerá este genial selector de fecha. Y al elegir la opción, la fecha se completará en el campo… Fantástico, ¿cierto?

En caso necesites un selector de fecha que también incluya un selector de hora, tengo un artículo premium donde vemos como implementarlo en un par de pasos:
Licencia Divi para tu sitio web
Si aún no cuentas con el tema Divi, o lo tienes instalado pero sin licencia, puedes utilizar nuestro servicio de activación de licencias. Tendrás instalado en tu sitio el tema Divi, con una licencia lifetime, por un súper precio.
Y si eres un miembro premium obtienes un 20% de descuento adicional
¡Vuélvete un miembro VIP!
Accede a la descarga de Plugins Premium, 20% de descuento en activación de licencias y acceso a los tutoriales premium, volviéndote un miembro VIP
Ahora sí, empecemos con el procedimiento para mostrar el selector de fecha en el formulario de contacto Divi:
PASO 1: Ajustes en el formulario de contacto de Divi
En nuestro formulario ya creado, debemos agregar un campo nuevo para la fecha.
El título del nuevo campo (lo que se muestra al usuario) puede ser cualquiera, para el ejemplo voy a poner: “Seleccionar fecha”.
Lo que sí es sumamente importante en éste paso, es que el valor de la identificación del campo sea: “vic-date” (ya que el código que usaremos más adelante, trabaja con ese identificador). La configuración del campo quedaría de la siguiente manera:

Como para cualquier campo de formulario de contacto de Divi, no olvidar añadir el identificador al patrón del mensaje, para que los datos se envíen.
Si no recuerdas bien cómo configurar esa parte, puedes darle un vistazo a nuestro artículo anterior: Cómo crear y configurar formularios de contacto en Divi y TRUCO para saber desde qué url se envía

Si te está gustando éste artículo, éstos otros te encantarán:
PASO 2: Agregando el código para mostrar el selector de fecha en el formulario Divi
Ahora, simplemente debemos agregar un módulo código y pegar en él el fragmento de código que he dejado listo para copiar y pegar.
Lo que hará ese snippet es llamar a una librería llamada Jquery UI, ejecutar un módulo de selector de fecha (Datepicker), configurar los términos en español y mostrar el selector cuando se haga click en el campo cuyo identificador sea “vic-date”. ¿Hermoso, verdad?
Aquí el código para copiar y pegar:
Contenido Gratuito bloqueado
Para desbloquear el contenido oculto de los tutoriales gratuitos, simplemente inicia sesión. Si no tienes una cuenta, solicita el enlace de registro desde el botón de abajo:
Una vez pegado el código en el módulo, debería quedarte así:

Y listo. No olvidar guardar cambios.
PASO 3: Configurando el selector de fecha (Date Picker)
Hasta éste punto, el selector de fecha ya debería aparecer al hacer click sobre el nuevo campo que creamos. Vamos a ver algunas configuraciones importantes.
- Primero, verán una sección que dice: “Pon tu color principal aquí”. Debajo pueden poner el código del color que desean que use el selector. El color aparece para las fechas seleccionadas y cuando se pasa el ratón sobre ellas.
- Mas abajo, verán una sección que dice: “Configuración”, allí podrán modificar lo siguiente:
- dateFormat: Aquí pueden poner el formato en el que desean que sean guardadas las fechas. (Si desean, pueden dejarlo como está)
- changeMonth: Si lo dejan en true, permitirá que se seleccione un mes específico en un menú despegable. Si lo ponen en false, no se podrá modificar de esa forma.
- changeYear: Si lo dejan en true, permitirá que se seleccione un año específico en un menú despegable. Si lo ponen en false, no se podrá modificar de esa forma.
- minDate: ¿Desde que fecha se puede empezar a seleccionar?.
- maxDate: ¿Hasta que fecha máxima se puede seleccionar?.
- beforeShowDay: Ésta sección está bloqueada por dos slash //, si desean que los fines de semana (Sábados y Domingos) no puedan ser seleccionados, Borren los slashes.

Viendo los resultados
Como decía, el selector de fecha ya estará activo, bastará con que el usuario haga click al campo para que aparezca la interfaz interactiva. Y al seleccionar una fecha, el dato se guardará en el mismo campo. Una obra de arte.
Si te gustan mis tutoriales, no olvides confirmar tu correo para notificarte cuando hayan nuevos. Nos vemos (¿leemos?) en el próximo artículo.

No me aparece y lo hice exactamente como lo tienes en el ejercicio, pero al seleccionar fecha sigue siente un campo de texto solamemte, donde es donde hay que poner el campo de codigo alomejor eso es lo que me esta fallando
Hola Victor, muchisimas gracias por este tutorial me ha servido muchisimo. Quería consultarte si también es posible hacerlo con horas.