¿Desea personalizar el campo Selector de fecha para permitir la selección de un intervalo de fechas o de varias fechas dentro de su formulario? Cuando usted permite múltiples reservas en un formulario, puede necesitar dar a sus visitantes la posibilidad de seleccionar un rango de fechas o múltiples fechas. Por defecto, sólo se puede seleccionar una única fecha dentro de este calendario.
En este tutorial, le mostraremos cómo usar PHP para proporcionar un rango de fechas o múltiples selecciones de fechas para sus WPForms.
Nota: Cuando use fragmentos para el selector de fecha, es mejor desactivar cualquiera de las características incorporadas que WPForms provee en el constructor de formularios para restringir aún más las fechas. Para obtener más información, consulte esta documentación.
Creación del formulario
Primero tendrá que crear su formulario y añadir al menos un campo de formulario Fecha/Hora y establecer el campo como Selector de Fecha.
Si necesita ayuda para crear un formulario, consulte esta documentación.
Permitir un intervalo de fechas o varias fechas
Una vez creado el formulario, elija si desea permitir un intervalo de fechas o permitir la selección de varias fechas en el formulario y añada ese fragmento a su sitio.
Si necesitas ayuda sobre cómo añadir snippets a tu sitio, consulta este tutorial.
Nota: Tenga en cuenta que si edita estas entradas, la pantalla de entrada no admite intervalos de fechas ni fechas múltiples. Este fragmento es sólo para los usuarios frontend de sus formularios.
Intervalo de fechas
Este fragmento en particular permitirá que todos los selectores de fecha seleccionen un rango de fechas para todos los formularios.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
En la entrada de presentación, se anotarán las fechas de inicio y fin.
Fechas múltiples
Alternativamente, puede utilizar este fragmento que permitiría seleccionar múltiples fechas para cada selector de fecha en sus formularios creados con WPForms.
/**
* Modify WPForms Date/Time field date picker to accept multiple dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_multiple() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "multiple"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_multiple', 10 );
Dentro de la entrada, las fechas seleccionadas irán separadas por una coma.
Nota: Si utiliza integraciones de terceros, es posible que estos formatos de fecha no sean aceptados por dichos servicios. Asegúrese de probar cualquier personalización antes de utilizarla en un formulario activo.
Y ya está. Ahora puede seleccionar un rango de fechas o múltiples fechas en sus WPForms. ¿Le gustaría crear más opciones para su campo Fecha? Pruebe el artículo Cómo crear formatos adicionales para el campo Fecha.
Acción de referencia
PREGUNTAS FRECUENTES
P: ¿Cómo puedo seleccionar un solo formulario o un solo selector de fecha dentro de un formulario específico?
R: Para orientar un formulario específico para el intervalo de fechas, por ejemplo, utilizaría este fragmento.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049 = window.wpforms_1049 || {};
window.wpforms_1049.datepicker = {
mode: "range",
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Mientras que el 1049 dentro del window.wpforms_1049 es el ID del formulario.
Si tiene varios selectores de fecha dentro de un formulario específico, podría apuntar a un ID de campo específico con este ejemplo.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049_11 = window.wpforms_1049_11 || {};
window.wpforms_1049_11.datepicker = {
mode: "range",
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Al igual que en el primer ejemplo, nos dirigimos al ID de formulario 1049, pero en este caso sólo nos dirigimos al selector de fecha con el ID de campo 11.
Si necesita ayuda para encontrar su ID de formulario y campo, consulte este tutorial.
P: ¿Puede el formulario utilizar el intervalo de fechas y seguir limitando las fechas?
R: ¡Por supuesto! Puede utilizar el intervalo de fechas, no permitir fechas pasadas y sólo permitir que se elija un número de días por adelantado. En el siguiente fragmento de código, nos dirigimos al formulario ID 1049 y el selector de fecha del formulario lo hará:
- No permitir la selección de fechas pasadas
- Utilizar la función de intervalo de fechas
- Permitir sólo hasta 14 días para ser seleccionado
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_1049 = window.wpforms_1049 || {};
window.wpforms_1049.datepicker = {
minDate: new Date(),
mode: "range",
maxDate: new Date().fp_incr(14)
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Si necesita ayuda para encontrar su ID de formulario y campo, consulte este tutorial.
P: ¿Puedo cambiar el separador del intervalo de fechas?
R: ¡Por supuesto! Para utilizar un separador de fechas diferente en el intervalo de fechas, utilice este fragmento de código en lugar del anterior.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
locale: {
rangeSeparator: 'sep-text-goes-here'
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
Sólo recuerda cambiar rangeSeparator: 'sep-text-goes-here' para que coincida con lo que quieres que sea el separador. Por defecto, verá un guión (-) como separador.
P: ¿Puedo exigir que se seleccione un intervalo mínimo de días?
R: Por supuesto, para utilizar el rango y requerir un número mínimo de días, sólo tiene que utilizar este fragmento de código.
/**
* Modify WPForms Date/Time field date picker to accept a range of dates.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
onClose: function(selectedDates, dateStr, instance) {
var daysInRange = document.getElementsByClassName('inRange');
var totalDays = daysInRange.length+2;
if(totalDays<=7) {
alert("Min 7 Days Required");
this.clear();
}
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
P: ¿Puedo orientar los selectores de fecha utilizando clases CSS en lugar de objetos de ventana?
R: Sí, puede orientar los selectores de fecha utilizando clases CSS en lugar de objetos de ventana. Este enfoque permite una mayor flexibilidad en la orientación de elementos específicos sin una amplia personalización.
He aquí un ejemplo usando selectores de clase jQuery:
/**
* Modify WPForms Date/Time field date picker to accept a range of dates using jQuery.
*
* @link https://wpforms.com/developers/allow-date-range-or-multiple-dates-in-date-picker/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
if (typeof flatpickr !== 'undefined') {
$('.travel-form-date-range').each(function() {
var inputField = $(this).find('input.flatpickr-input');
if (inputField.length) {
flatpickr(inputField[0], {
mode: "range",
disableMobile: true
});
}
});
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10);
En este ejemplo, nos dirigimos a los selectores de fecha con la clase CSS travel-form-date-range. Este método le permite aplicar la funcionalidad de intervalo de fechas a selectores de fecha específicos basándose en su clase, en lugar de utilizar IDs de formulario o campo.
Recuerde sustituir travel-form-date-range con la clase CSS real que está utilizando para sus campos de selección de fecha.