Si has utilizado alguna vez el plugin para WordPress Contact Form 7 para realizar un formulario de reserva, habrás podido observar que puedes establecer un mínimo de días a la hora de seleccionar una fecha para reservar. Lo que no existe es la opción para establecer tiempo mínimo en horas en el formulario a partir de la fecha y hora actual. Porque no es lo mismo poder reservar de un día para otro (sean las 10 de la mañana o las 11 de la noche), que reservar pasadas 24 horas.
Realizando el formulario de la manera que os proponemos a continuación y añadiendo nuestro filtro en el function.php de la plantilla de WordPress podremos controlar el tiempo mínimo de reservar en días, horas y minutos.
Paso 1. Creación del formulario en Contact Form 7
Lo primero que vamos a hacer es crearnos el formulario con los campos fecha, hora y minutos (además del resto de campos que queramos que figuren en el formulario). Como Contact Form 7 no dispone de un selector de hora, emplearemos dos campos “select”, uno para las horas y otro para los minutos. Nuestros campos quedarán así:
<p>Fecha<br/>[date date1 id:date-form "yyyy-mm-dd"] </p> <p>Hora * [select* hour1 id:hour1 "00" "01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "13" "14" "15" "16" "17" "18" "19" "20" "21" "22" "23"] Minutos * [select* minute1 id:minute1 "00" "05" "10" "15" "20" "25" "30" "35" "40" "45" "50" "55"]</p> <p>* Campos obligatorios</p>
Es importante que al menos el campo minutos (minute1) esté marcado como obligatorio, para que se active el filtro que añadiremos al function.php. El aspecto será parecido a este:
Paso 2. Inserción del filtro en el function.php
//Contact Form 7 validador fecha y hora add_filter( 'wpcf7_validate_select*', 'custom_datetime_confirmation_validation_filter', 10, 2 ); function custom_datetime_confirmation_validation_filter( $result, $tag ) { $tag = new WPCF7_Shortcode( $tag ); if ( 'minute1' == $tag->name ) { // Fecha y hora de reserva $minute1 = isset( $_POST['minute1'] ) ? trim( $_POST['minute1'] ) : ''; $hour1 = isset( $_POST['hour1'] ) ? trim( $_POST['hour1'] ) : ''; $date1 = isset( $_POST['date1'] ) ? trim( $_POST['date1'] ) : ''; $date1 = explode('-', $date1); // Conversion de fecha y hora a minutos $summinres = ($date1[0] * 525600) + ($date1[1] * 43200) + ($date1[2] * 1440) + ($hour1 * 60) + $minute1; // Fecha y hora actual $hoy = getdate(); // Conversion de fecha y hora a minutos $summinhoy = ($hoy[year] * 525600) + ($hoy[mon] * 43200) + ($hoy[mday] * 1440) + (($hoy[hours]+2) * 60) + $hoy[minutes]; // Si el mes actual tiene 31 dias y estamos en el ultimo dia del mes if ($hoy[mday]==31) { $summinhoy -= 1440; }; // Si el mes actual es febrero, y estamos en el ultimo dia del mes, pudiendo ser bisiesto o no if ($hoy[mon]==2) { if(((!($hoy[year]%4) && ($hoy[year]%100)) || !($hoy[year]%400)) && ($hoy[mday]==29)) { $summinhoy += 1440; } elseif ($hoy[mday]==28){ $summinhoy += 2880; } }; // Diferencia en minutos entre la fecha de reserva y la actual $diferencia = $summinres - $summinhoy; // Tiempo minimo de reserva (24 horas) $compare = 1440; // Comparacion if ( $diferencia < $compare ) { $result->invalidate( $tag, "Se debe reservar con 24 horas de antelacion" ); } } return $result; }
Este filtro añade una validación personalizada al plugin. En concreto se la aplicamos al campo “select” con nombre “minute1”, de ahí que haya que ponerlo como campo obligatorio.
El proceso consiste en obtener la fecha y hora de reserva y convertirla a minutos. Hacemos lo mismo con la fecha y hora actual (getdate()). En este paso hay que llevar cuidado con la franja horaria considerada por WordPress. Para España es UCT + 2, por lo que a la hora obtenida hay que sumarle dos horas.
Al haber simplificado los meses en 30 días para pasarlos a minutos, añadimos un condicional para cuando sea día 31. También lo hacemos para el mes de febrero incluyendo cuando sea bisiesto.
Una vez tenemos las dos fechas en minutos, las restamos y comparamos su valor con el que queramos poner como mínimo, pasado a minutos. En nuestro caso, 24 horas, que son 1440 minutos. Si la diferencia es menor mostrar el mensaje de error escrito.
[xyz-ihs snippet=”SuscripcionPost”] [xyz-ihs snippet=”final-post”]Estés donde estés, si necesitas un página web en WordPress, tienda online Woocemmerce, Desarollo de un plugin para WordPress, campañas de Google Ads, Shopping y Remarketing, así como una estrategia SEO no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.
carlos
Hola que tal.. espero alguien pueda ayudarme…
yo ocupo un formulario de reservaciones pero nose como poner un campo donde pueda seleccionar un dia… lo que necesito es que me despliegue el calendario y poder seleccionarlo…
alguien podria hecharme la mano con eso….le he movido pero no hayo como hacerlo
gracias…
Juan Manuel Martínez
Hola Carlos. ¿Estás utilizando el plugin Contact Form 7? Este plugin lleva un calendario que se despliega para seleccionar la fecha. Prueba instalando el plugin Contact Form 7 Datepicker. Añade un calendario al selector date.
Si aún así no te sale, es posible que tengas algún error javascript o jquery en alguna parte de la web que interrumpe la carga de todas las funciones.
Esperamos que consigas resolverlo. Saludos.
Luis Alberto Bustos Quezada
Hola.
Tengo 2 datepicker en CF7 y el primero es simple, fecha mínima hoy. El segundo me complica, la fecha mínima debe ser mayor a la del datepicker 1
¿como lo harías tu?
Juan Manuel Martínez
Hola Luis Alberto. En tu caso, lo primero es crear los dos campos como obligatorios. En mi caso, date1 y date2. La función es más sencilla, y sería esta:
//Contact Form 7 validador de fecha
add_filter( ‘wpcf7_validate_date*’, ‘custom_datetime_confirmation_validation_filter’, 10, 2 );
function custom_datetime_confirmation_validation_filter( $result, $tag ) {
$tag = new WPCF7_Shortcode( $tag );
if ( ‘date2’ == $tag->name ) {
if ( strtotime(trim( $_POST[‘date1’] )) >= strtotime(trim( $_POST[‘date2’] ))) {
$result->invalidate( $tag, “La segunda fecha debe ser mayor que la primera” );
}
}
return $result;
}
Utilizamos el método strtotime que convierte la fecha en segundos y las comparamos. Si la primera fecha es mayor o igual que la segunda, se muestra el mensaje.
Espero que te sirva. Gracias por participar.
Juan Manuel Martínez
Nos alegra que te haya sido de utilidad.
Karol
¡Gracias! Me sirvió mucho, ya estaba yo pensando durante demasiado tiempo cómo hacer que se desplegara un calendario, y resolver el asunto de la hora ☺