Rango entre dos fechas con Contact Form 7

Han sido días de mucho trabajo y viajes y por fin tengo tiempo de escribir ahora. Necesitábamos implementar la posibilidad de elegir un rango de fechas en un formulario de contacto que luego se envía por correo electrónico, evitando que se pudieran seleccionar fechas pasadas, ya que se trata para un alojamiento turístico.

Había pensado hacerlo con el plugin Contact Form 7 del repositorio de WordPress, pero por defecto solo nos deja añadir “datepickers” sin poder configurarlos, es decir, que no respetaba los rangos y podías elegir las fechas que quisieras.

jQuery al poder

No pasa nada, que gracias al gran poder que tiene WordPress de customización y poco de JavaScript podemos personalizar nuestros datepickers como queramos. Primero creamos el formulario de contacto dentro de Contact Form 7 con los dos campos “date” que vamos a usar para seleccionar el rango de fechas:


Fecha de llegada*:
[date* date-start date-format:MM_d_yy id:datePicker]

Fecha de salida*:
[date* date-end date-format:MM_d_yy id:datePicker2]

Importante que ambos campos tengan un ID, ya que lo necesitaremos luego.

Ahora ya tenemos 2 datepickers en nuestro formulario, pero podemos seleccionar en ambos cualquier fecha, para ello vamos a darle un poco de magia con jQuery.


//Creamos una función nuevo a la que llamaremos para que se ejecute en el action wp_footer

function calendar_js(){
  ?>
 <script>
jQuery(function ($) {
 var now = new Date(); 
 var day = ("0" + now.getDate()).slice(-2);
 var month = ("0" + (now.getMonth() + 1)).slice(-2);
 var today = now.getFullYear()+"-"+(month)+"-"+(day);
$('#datePicker').val(today); //Le damos el valor del día actual al datepicker1
$("#datePicker").attr("min", today); //Con esto evitamos que pueda seleccionar fechas del pasado el datepicker1
 
$('#datePicker2').val(today); //Le damos el valor del día actual al datepicker2
$("#datePicker2").attr("min", today); //Con esto evitamos que pueda seleccionar fechas del pasado el datepicker2
 
 // Cada vez que se cambie el datepicker1 se ejecuta este código para poder seleccionar rangos de fecha
document.getElementById("datePicker").onchange = function() {
 
 var fecha = $('#datePicker').val();
 
 $('#datePicker2').val(fecha); //Forzamos que al cambiar el datepicker1 el datepicker2 sea el mismo día que el 1
 $("#datePicker2").attr("min", fecha); //Evitamos que se seleccione una fecha anterior al valor del datepicker1
}; 
 
}); 
 </script>
 <?php
 }
 

Ya tenemos nuestra función creada, lista para ejecutarse, ahora la cuestión es, donde añadimos este código. Necesitamos que se ejecute en el footer de la página, ya que si lo hace en el header los dos datepickers no existen para eso vamos a usar el action de WordPress wp_footer para que se añada en el pie de página.

add_action('wp_footer', 'calendar_js');

Listo, ahora solo falta copiar todo y añadirlo al archivo functions.php del tema hijo y ya funciona.

Rango de fechas Contact Form 7

Deja un comentario

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

Información sobre protección de datos

  • Responsable: Laura Díaz
  • Fin del tratamiento: Controlar el spam, gestión de comentarios
  • Legitimación: Tu consentimiento
  • Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  • Derechos: Acceso, rectificación, portabilidad, olvido.
  • Contacto: laura.bobysuh@gmail.com.
  • Información adicional: Más información en nuestra política de privacidad.