Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woo-checkout-field-editor-pro domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wp-pagenavi domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the hurrytimer domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce-paypal-payments domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the woocommerce-subscriptions domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Notice: Function _load_textdomain_just_in_time was called incorrectly. Translation loading for the wordpress-seo domain was triggered too early. This is usually an indicator for some code in the plugin or theme running too early. Translations should be loaded at the init action or later. Please see Debugging in WordPress for more information. (This message was added in version 6.7.0.) in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114

Deprecated: ¡La función get_page_by_title ha quedado obsoleta desde la versión 6.2.0! Usa WP_Query en su lugar. in /home/victoraquic1/public_html/wp-includes/functions.php on line 6114
▷ Agregar selector de fecha en formulario de contacto Divi Wordpress
Consigue Divi desde la web oficial a un precio especial
Ver Más

patrocinado

La mejor membresía para DiviFans

Aprovecha el plan más completo para DiviFans. Con una membresía de 1 AÑO de Guaupress obtienes: Descarga de +1000 plugins y temas WordPress, incluído +20 plugins Divi premium, por 1 año; API KEY del tema Divi para sitios Ilimitados, Pack de +500 plantillas Premium para Divi, listas para importar. La mejor membresía para DiviFans. Mira a detalle lo que ofrecemos haciendo click al botón de abajo:

Agregar selector de fecha en formulario de contacto Divi WordPress

por | Ago 7, 2022 | Divi Trucos | 2 Comentarios

PATROCINADO

El Mejor Hosting WordPress Divi. Estable, Seguro y Rápido.

Prueba el servicio de hosting más confiable y conocido del mercado: BANAHOSTING, sin riesgos con un Súper Descuento del 95% en cualquier plan. Cupón de descuento: BH1D

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í:

Cómo crear formularios de contacto en Divi y TRUCO para saber desde qué url se envía

Aprende cómo crear, configurar y rastrear desde dónde se envía (con un súper bonus) formularios de contacto creados en Divi

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:

Selector de fecha MEJORADA con selector de hora en formularios Divi

A muchos les ha sido de mucha ayuda el poder agregar la funcionalidad de date picker o selector de fecha…

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

Cómo crear formularios de contacto en Divi y TRUCO para saber desde qué url se envía

Aprende cómo crear, configurar y rastrear desde dónde se envía (con un súper bonus) formularios de contacto creados en Divi

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:

Quiero Registrarme

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.

Si te gustó el contenido

Apóyanos compartiendo en tus redes, nos ayudarías muchísimo. Y haz click en la quinta estrella de abajo, para saber que éste tema te interesa y hacer artículos similares.

4.4/5 - (7 votos)

No olvides que subo trucos nuevos cada semana suscríbete a mi canal y dale a la campanita para que te enteres cuando suba uno nuevo.

Hasta la próxima!!

Artículos Relacionados

Victor Aquino

Experto en WordPress y Divi, entusiasta del SEO, Copywriting, Marketing Digital y Negocios Online en general. Amante de la vida y tu webmaster de confianza.

Contactar

¿Quieres invitarme un cafécito?

Así podré estar más despierto para crear más contenido gratuito como éste 😛

Click Aquí

¿Tienes dudas?

2 Comentarios

  1. Edgar

    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

    Responder
  2. Gabriel Botero

    Hola Victor, muchisimas gracias por este tutorial me ha servido muchisimo. Quería consultarte si también es posible hacerlo con horas.

    Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Hosting WordPress

El mejor Hosting Premium optimizado para WordPress y Divi, al mejor precio.

Licencias 1 Sitio

Divi Theme/ Builder

Ver Más

Divi Machine

Ver Más

Divi Bodycommerce

Ver Más

Divi Flash

Ver Más

Últimos Artículos

Q

¿Quieres Desbloquear TODO el contenido?

Registrándote en nuestra web tendrás acceso a TODO el contenido gratuito oculto. Deja tu correo aquí abajo para que te enviemos un mail con el formulario de registro gratuito.


Notice: ob_end_flush(): failed to send buffer of zlib output compression (0) in /home/victoraquic1/public_html/wp-includes/functions.php on line 5464