Resumen de IA
¿Le gustaría personalizar el campo Selector de fechas para permitir la selección de un rango de fechas o fechas múltiples dentro de su formulario? Cuando permita reservas múltiples en un solo formulario, es posible que deba dar a sus visitantes la capacidad de seleccionar un rango de fechas o fechas múltiples. Por defecto, solo se puede seleccionar una fecha dentro de este calendario.
En este tutorial, le mostraremos cómo usar PHP para proporcionar un rango de fechas o selecciones de fechas múltiples para sus WPForms.
Nota: Al usar fragmentos para el Selector de fechas, es mejor desactivar cualquiera de las funciones integradas que WPForms proporciona 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, deberá crear su formulario y agregar al menos un campo de formulario Fecha/Hora y configurar el campo como Selector de fechas.
Si necesita ayuda para crear un formulario, revise esta documentación.
Permitir un rango de fechas o fechas múltiples
Una vez que su formulario esté creado, elija si desea permitir un rango de fechas o permitir la selección de fechas múltiples en su formulario y agregue ese fragmento a su sitio.
Si necesita ayuda sobre cómo agregar fragmentos a su sitio, consulte este tutorial.
Nota: Tenga en cuenta que si edita estas entradas, la pantalla de entrada no admite rangos de fechas ni fechas múltiples. Este fragmento es solo para los usuarios frontend de sus formularios.
Rango de fechas
Este fragmento en particular permitirá que todos los selectores de fechas 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 );
Dentro de la entrada de envío, se registrarán las fechas de inicio y fin.
Fechas múltiples
Alternativamente, puede usar este fragmento que permitiría seleccionar fechas múltiples para cada selector de fechas 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 se separarán por una coma.
Nota: Si utiliza integraciones de terceros, es posible que esos servicios no acepten estos formatos de fecha. Asegúrese de probar cualquier personalización antes de usarla en un formulario en vivo.
¡Y eso es todo! Ahora puede seleccionar un rango de fechas o fechas múltiples en sus WPForms. ¿Le gustaría crear más opciones para su campo Fecha? Pruebe el artículo sobre Cómo crear formatos adicionales para el campo de fecha.
Acción de referencia
Preguntas frecuentes
P: ¿Cómo puedo dirigirme a un solo formulario o a un solo selector de fechas dentro de un formulario específico?
R: Para dirigirse a un formulario específico para el rango de fechas, como ejemplo, usarí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 de window.wpforms_1049 es el ID del formulario.
Si tiene varios selectores de fechas dentro de un formulario específico, podría dirigirse 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 del formulario 1049, sin embargo, con este ejemplo, también nos dirigimos solo al selector de fechas con el ID de campo 11.
Si necesita ayuda para encontrar el ID de su formulario y campo, consulte este tutorial.
P: ¿Puede el formulario usar el rango de fechas y aun así limitar las fechas?
R: ¡Absolutamente! Puede usar el rango de fechas, no permitir fechas pasadas y solo permitir que se seleccionen un número de días con anticipación. En el fragmento de código a continuación, estamos apuntando al ID del formulario 1049 y el selector de fechas del formulario:
- No permitir la selección de fechas pasadas
- Usar la funcionalidad de rango de fechas
- Permitir solo hasta 14 días para ser seleccionados
/**
* 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 el ID de su formulario y campo, consulte este tutorial.
P: ¿Puedo cambiar el separador para el rango de fechas?
R: ¡Absolutamente! Para usar un separador de fechas diferente en el rango de fechas, use 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 );
Solo recuerde cambiar rangeSeparator: ‘sep-text-goes-here’ para que coincida con lo que desea que sea el separador. Por defecto, verá un guion (-) como separador.
P: ¿Puedo requerir un rango mínimo de días para ser seleccionado?
R: Absolutamente, para usar el rango y requerir un número mínimo de días, solo use 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 apuntar a los selectores de fecha usando clases CSS en lugar de objetos de ventana?
R: Sí, puede apuntar a los selectores de fecha usando clases CSS en lugar de objetos de ventana. Este enfoque permite una mayor flexibilidad para apuntar a elementos específicos sin una personalización extensa.
Aquí hay un ejemplo usando selectores de clase de 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, estamos apuntando a selectores de fecha con la clase CSS travel-form-date-range. Este método le permite aplicar la funcionalidad de rango de fechas a selectores de fecha específicos según su clase, en lugar de usar IDs de formulario o campo.
Recuerde reemplazar travel-form-date-range con la clase CSS real que está utilizando para sus campos de selector de fecha.
¿Puedo mostrar varios meses a la vez en el calendario del selector de fecha?
¡Sí! Puede mostrar más de un mes a la vez utilizando la opción showMonths de la biblioteca Flatpickr. Esto es útil si desea que los usuarios vean más fechas de un vistazo al seleccionar un rango.
function wpf_dev_date_picker_range() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
mode: "range",
showMonths: 2
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_range', 10 );
En el ejemplo anterior, el calendario mostrará 2 meses uno al lado del otro al seleccionar fechas. Puede cambiar showMonths a cualquier número dependiendo de cuántos meses desee mostrar.