Cómo limitar los años en tu selector de fechas

Introducción

¿Te gustaría limitar los años que se muestran en tu campo de formulario Selector de fecha? En este tutorial, vamos a hacer que el Selector de fecha limite el año a cualquier persona mayor de 18 años. Usando PHP puedes lograr esto fácilmente y te guiaremos en cada paso.

Creación del formulario

Para empezar, crearemos un nuevo formulario y agregaremos nuestros campos, que incluirán un campo de Fecha.

Una vez que agregues el campo de formulario Fecha, haz clic en la pestaña Avanzado y, en el menú desplegable, selecciona Selector de fecha como el Tipo de fecha.

Configuración

A continuación, deberás copiar este fragmento en tu sitio.

Si necesitas ayuda sobre cómo agregar fragmentos a tu sitio, consulta este tutorial.

/**
 * Limit years in date picker
 *
 * @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
 */

function wpf_dev_limit_date_picker_years() {
?>

<script type="text/javascript">

	var d = new Date();
	window.wpforms_datepicker = {

		disableMobile: true,
		// Don't allow users to pick years less than 18 years
		maxDate: d.setDate( d.getDate() - 6574 ),

	}

</script>

<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );

Con este fragmento, estamos forzando al Selector de fecha a mostrar solo la fecha de nacimiento de cualquier persona mayor de 18 años.

¡Y eso es todo! Ahora has limitado los años disponibles dentro de tu selector de fecha. ¿Te gustaría también permitir un rango de fechas en tu selector de fecha? Echa un vistazo a nuestro tutorial sobre Cómo permitir rangos de fechas o fechas múltiples en el Selector de fecha.

Relacionado

Referencia de acción: wpforms_wp_footer_end

Preguntas frecuentes

P: ¿Puedo aplicar esto también al Desplegable de fecha?

R: Puedes usar fácilmente un fragmento diferente para lograr esto. Simplemente sigue este tutorial y cambia el rango de años $args['years'] = range( 2019, 2020 ); para introducir el rango de años que desees.

P: ¿Cómo puedo dirigirme a un solo formulario?

R: Absolutamente, para dirigirte a un solo formulario, usa este fragmento. Solo recuerda cambiar el ID del formulario y del campo. Este fragmento utiliza window.wpforms_1279_1, que es el ID del formulario 1279 y el ID del campo 1. Necesitarás actualizar estos IDs para que coincidan con los tuyos.

Si necesitas ayuda para encontrar estos números de ID, por favor, consulta este tutorial.

/**
 * Limit years in date picker for a specific form
 *
 * @link https://wpforms.com/developers/how-to-limit-the-years-inside-your-date-picker/
 */

function wpf_dev_limit_date_picker_years() {
?>
 
<script type="text/javascript">

	var d = new Date();
	window.wpforms_1279_1 = window.wpforms_1279_1 || {};
	window.wpforms_1279_1.datepicker = {

		disableMobile: true,
		// Don't allow users to pick years less than 18 years
		maxDate: d.setDate( d.getDate() - 6574 ),

	}

</script>
 
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker_years', 10 );