[Resuelto] Contact Form 7  

Hola Jose,

Prueba agregar esto a tu formulario:

[date* fecha-user placeholder "Selecciona una fecha"]
<div id="fecha-menor-de-un-ano" style="display:none;">
<p>La fecha seleccionada es anterior a un año desde hoy.</p>
</div>
<div id="fecha-mayor-de-un-ano" style="display:none;">
<p>La fecha seleccionada es posterior a un año desde hoy.</p>
</div>

Luego el mensaje no puede mostrarse a menos que agregues un código JavaScript, para ello puedes usar un plugin como WpCode:

https://wordpress.org/plugins/insert-headers-and-footers/

Ingresas en Agregar nuevo código y seleccionas JavaScript:

colocas esto:

document.addEventListener('DOMContentLoaded', function () {
const fechaInput = document.querySelector('input[name="fecha-user"]');
const mensajeMenor = document.getElementById('fecha-menor-de-un-ano');
const mensajeMayor = document.getElementById('fecha-mayor-de-un-ano');

function evaluarFecha() {
const valor = fechaInput.value;
if (!valor) return;

const fechaSeleccionada = new Date(valor);
const hoy = new Date();
const haceUnAño = new Date();
haceUnAño.setFullYear(hoy.getFullYear() - 1);

if (fechaSeleccionada < haceUnAño) {
mensajeMenor.style.display = 'block';
mensajeMayor.style.display = 'none';
} else {
mensajeMenor.style.display = 'none';
mensajeMayor.style.display = 'block';
}
}

fechaInput.addEventListener('change', evaluarFecha);
});

Debe quedar asi:

Verifica que este igual en las flechas que te indico en la imagen, luego debe funcionar en tu formulario:

Un saludo 🖐️ 

Hola,

Muchísimas gracias, me funciona perfectamente.

El caso es que en ese mismo formulario, el usuario tambien tendría que seleccionar otra fecha más, pero en este caso, en vez de 1 año, tienen que ser dos meses ¿Sería mucho pedir que me facilitaráis el código para este otro supuesto de 2 meses, y que sea compatible con el de 1 año en un mismo formulario?

Muchas gracias,

José.

Hola Jose,

Puedes verificar si con este te funciona:

[date* fecha-user placeholder "Fecha 1 (para validar 1 año)"]


<div id="fecha-menor-de-un-ano" style="display:none;">
<p>La primera fecha es anterior a un año desde hoy.</p>
</div>

<div id="fecha-mayor-de-un-ano" style="display:none;">
<p>La primera fecha es posterior a un año desde hoy.</p>
</div>

[date* fecha-dosmeses placeholder "Fecha 2 (para validar 2 meses)"]


<div id="fecha-menor-de-dos-meses" style="display:none;">
<p>La segunda fecha es anterior a 2 meses desde hoy.</p>
</div>

<div id="fecha-mayor-de-dos-meses" style="display:none;">
<p>La segunda fecha es posterior a 2 meses desde hoy.</p>
</div>

Este seria el que agregas en tu formulario, puedes ver que esta separado por dos secciones, ahor el codigo que vas a cambiar en el plugin de wp code:

<script>
document.addEventListener('DOMContentLoaded', function () {
// Función genérica para ocultar/mostrar según comparación de fecha
function evaluarFecha({ inputName, umbralMeses, menorID, mayorID }) {
const input = document.querySelector(`input[name="${inputName}"]`);
const menor = document.getElementById(menorID);
const mayor = document.getElementById(mayorID);

if (!input) return;

input.addEventListener('change', () => {
const valor = input.value;
if (!valor) return;

const fechaSeleccionada = new Date(valor);
const hoy = new Date();
const fechaLimite = new Date();

fechaLimite.setMonth(hoy.getMonth() - umbralMeses);

if (fechaSeleccionada < fechaLimite) {
menor.style.display = 'block';
mayor.style.display = 'none';
} else {
menor.style.display = 'none';
mayor.style.display = 'block';
}
});
}

// Llamadas para cada campo de fecha
evaluarFecha({
inputName: 'fecha-user',
umbralMeses: 12, // 1 año = 12 meses
menorID: 'fecha-menor-de-un-ano',
mayorID: 'fecha-mayor-de-un-ano'
});

evaluarFecha({
inputName: 'fecha-dosmeses',
umbralMeses: 2,
menorID: 'fecha-menor-de-dos-meses',
mayorID: 'fecha-mayor-de-dos-meses'
});
});
</script>

Verifica con esto y nos comentas.

Un saludo 🖐️ 

Ésto es justo lo que quería, funciona perfectamente. Muchísimas gracias.

Hola Jose,

Nos ayudaría en gran medida que nos valorases en este mensaje, puedes encontrar un botón para ello, igualmente quedamos atentos por si tienes alguna otra duda, recuerda que puedes crear un nuevo tema y con gusto lo vemos.

Un saludo 🖐️