Resumen de IA
¿Te gustaría personalizar las opciones de fecha del campo de fecha y hora en WPForms? El campo Fecha / Hora incluye dos opciones de formato para el selector de fecha: Selector de fecha, que proporciona al usuario un calendario, o Menú desplegable de fecha.
Con el lanzamiento de la versión 1.6.3, WPForms te ofrece opciones dentro del constructor de formularios para Limitar días e incluso Deshabilitar fechas pasadas, así como Limitar horas. Si esto es todo lo que necesitas hacer, revisa esta documentación.
Este tutorial se centrará más en la personalización del campo Menú desplegable de fecha y en el cálculo de bloques de fechas para el Selector de fecha.
Es importante recordar que si estás utilizando alguna de las fragmentos de código de esta documentación, las opciones del constructor de formularios para limitar deben estar desactivadas. Para obtener más información sobre las opciones integradas para limitar fechas, consulta esta documentación.
Creación del formulario
Antes de añadir ningún fragmento, necesitarás crear tu formulario y añadir tus campos. Dado que este tutorial se basa en el campo Menú desplegable de fecha, necesitarás añadir al menos un campo de Fecha.
Si necesitas ayuda para crear tu formulario, consulta este tutorial.
Una vez que hayas añadido tus campos de fecha, asegúrate de haber seleccionado el Tipo como Menú desplegable de fecha. Puedes establecer el Tipo de fecha haciendo clic en las opciones Avanzadas del campo del formulario.
Personalización del campo de fecha
Para personalizar el campo de Fecha, necesitarás añadir uno de los fragmentos de código a continuación en tu sitio.
Si necesitas ayuda para aprender a añadir fragmentos de código a tu sitio, revisa este tutorial.
Algunos de los fragmentos de código a continuación requerirán el uso de información específica del ID del formulario y del campo.
Uso de fragmentos en el menú desplegable de fecha
Limitar el número de días en el menú desplegable para que coincida con el mes
Para que el campo de Días coincida con la cantidad de días disponibles para ese mes en particular, usarías este fragmento.
/**
* Limit the days dropdown to match how many days are available for the selected month.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_days_dropdown_match_month( ) {
?>
<script type="text/javascript">
var date = new Date();
var month = date.getMonth();
var year = date.getFullYear();
var totalDays = 31; // Default day amount
jQuery(function($){
$( 'select[id$="-month"]' ).on( 'change', function(){
month = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find( 'select[id$="-day"]' ).append($( "<option></option>" ).attr( "value", i).text(i));
}
});
$( 'select[id$="-year"]' ).on( 'change', function(){
year = $(this).val();
totalDays = daysInMonth(month, year);
$(this).parent().find( 'select[id$="-day"] option:not(:first-child)').each(function(){
$(this).remove();
});
for (var i = 1; i <= totalDays; i++) {
$(this).parent().find('select[id$="-day"]').append($( "<option></option>" ).attr( "value", i).text(i));
}
});
});
function daysInMonth (month, year) {
return new Date(year, month, 0).getDate();
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_days_dropdown_match_month', 30 );
Limitar meses, días y años dentro del menú desplegable de fecha
Los fragmentos a continuación actualizarán los campos desplegables para mostrar solo del 5 al 12 (mayo-diciembre) para los meses disponibles, del 20 al 31 para los días disponibles y del 2020 al 2021 para los años disponibles. Puedes modificar los campos según sea necesario.
Hay dos formas diferentes de aplicar esto:
- Todos los campos desplegables de fecha dentro de un formulario específico
- Un menú desplegable de fecha específico dentro de un formulario específico.
Todos los campos desplegables de fecha dentro de un formulario específico
El fragmento a continuación solo se aplicará al ID de formulario 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10
if ( $form_id === 10 ) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Dirigirse a un menú desplegable de fecha específico dentro de un formulario específico
A continuación se aplicará al menú desplegable de fecha con ID de campo 3 dentro del formulario ID 10.
/**
* Filters labels and options within the date field’s dropdown format.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
$form_id = (int) $form_id;
// Only apply if the form's ID is 10 and field ID 3
if ( $form_id === 10 && $field['id'] == 3) {
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( 5, 12 );
$args[ 'days' ] = range( 20, 31 );
$args[ 'years' ] = range( 2024, 2025 );
}
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Iniciar el menú desplegable de fecha desde 'hoy'
En tu Selector de fecha, puedes hacer que el Mes, el Día y el Año se establezcan automáticamente con el mes, día y año de hoy usando este fragmento.
/**
* Select from today's date going forward within the range limit specified below
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_datetime_date_dropdowns( $args, $form_id, $field ) {
if( $form_id != 143 ) {
return $args;
}
// Set the lower and upper limits for each date dropdown
$args[ 'months' ] = range( date('m'), 12 );
$args[ 'days' ] = range( date('d'), 31 );
$args[ 'years' ] = range( date('Y'), 2030 );
return $args;
}
add_filter( 'wpforms_datetime_date_dropdowns', 'wpf_dev_datetime_date_dropdowns', 10, 3 );
Uso de fragmentos en el Selector de fecha
Deshabilitar fechas pasadas y mostrar solo los próximos 31 días
En este fragmento, deshabilitaremos cualquier fecha pasada y solo permitiremos la selección hasta 31 días a partir de la fecha actual para el ID del formulario 1137 y el ID del campo 14. Recuerda cambiar estos IDs para que coincidan con tu propio formulario y campo. Si no estás seguro de dónde encontrar estos IDs, revisa este tutorial.
/**
* Disable past dates, allow for selection for today + the next 31 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_1137_14 = window.wpforms_1137_14 || {};
window.wpforms_1137_14.datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate()),
maxDate: d.setDate(d.getDate() + 31),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Mostrar fechas de ayer, hoy y mañana
Usando el new Date().fp_incr(-1) puedes controlar fácilmente cuántos días minDate y maxDate se muestran simplemente aumentando el número. Usar el símbolo negativo (-) delante del número significa que serán días del pasado.
Como solo queremos que nuestro formulario comience desde ayer, comenzaremos con el minDate permitiendo solo el (-1) y terminaremos con el (1) (para que incluya hoy y mañana) para el maxDate
/**
* Allow date picker yesterday, today, and tomorrow
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date().fp_incr(-1), // 1 day in the past
// Don't allow users to pick any more than today
maxDate: new Date().fp_incr(1) // 1 day in the future
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Mostrar fechas a partir del día siguiente en adelante para el selector de fecha
Puedes usar fácilmente este fragmento de código que excluirá cualquier día pasado (incluido hoy).
Simplemente cambia el +1), por la cantidad de días que desees restringir el selector.
/**
* Show dates from the next day and onwards
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick dates less than 1 days out
minDate: d.setDate(d.getDate() + 1),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Bloquear rangos de fechas específicos para el selector de fecha
Para bloquear rangos de fechas específicos dentro del selector de fecha, usa este fragmento.
/**
* Limit the dates available in the Date Time date picker: Block out certain date ranges
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker() {
?>
<script type="text/javascript">
var d = new Date();
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick specific range of dates
disable: [
{
from: "2024-12-24",
to: "2024-12-26"
},
{
from: "2024-12-31",
to: "2025-01-01"
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker', 10 );
Permitir solo fechas específicas del mes
Si solo quieres que los usuarios seleccionen ciertos días del mes en el Selector de fecha, puedes usar el fragmento a continuación. En este ejemplo, solo el día 5 y el 20 de cada mes permanecen seleccionables y todas las demás fechas están deshabilitadas.
Para cambiar los días permitidos, reemplaza los números de día en la línea 23 (la condición que verifica el valor del día) con los días que deseas usar.
Puedes reemplazar los 5 y 20 en la línea 16 con cualquier otro número de fecha para que coincida con tus propios requisitos.
Limitar hasta cuándo los usuarios pueden seleccionar fechas en el selector de fecha
Si deseas limitar la fecha futura que los usuarios pueden seleccionar dentro del selector de fecha, usa este fragmento de código.
/**
* Don't allow date to be selected after maxDate
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick dates after Dec 31, 2025
maxDate: new Date( '2025-12-31' )
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Excluir todos los días pasados y los lunes en el selector de fecha
Para limitar todos los días pasados y los lunes futuros, usa este fragmento.
/**
* Don't allow users to pick Mondays
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
minDate: new Date(),
// Don't allow users to pick Mondays
enable: [
function(dateObj){
return dateObj.getDay() !== 1;
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Mostrar mensaje cuando se selecciona la fecha actual
Para este ejemplo, mostraremos un mensaje emergente cuando se seleccione la fecha actual.
/**
* Display pop up message when current date is selected
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_check_date() {
?>
<script type="text/javascript">
// Only display the message if the form ID is 323 and the field ID is 4
window.wpforms_323_4 = window.wpforms_323_4 || {};
window.wpforms_323_4.datepicker = {
mode: "single",
onClose: function(selectedDates, dateStr, instance) {
var today = new Date();
if (selectedDates[0].toLocaleDateString("en-US") == today.toLocaleDateString("en-US")) {
alert( 'Custom Message: You have selected todays date' );
this.clear();
}
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_check_date', 10 );
Deshabilitar un día específico de la semana
Para este ejemplo, queremos deshabilitar completamente los domingos de nuestro selector de fecha usando este fragmento.
/**
* Disable a specific day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_limit_date_picker_disable_specific_weekday() {
?>
<script type="text/javascript">
var d = new Date();
// Only apply to the form ID 420 and the field ID 1
window.wpforms_420_1 = window.wpforms_420_1 || {};
window.wpforms_420_1.datepicker = {
disableMobile: true,
// Don't allow users to pick specific day of the week
disable: [
function(date) {
// return true to disable
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 0 = Sunday
return (date.getDay() === 0);
}
]
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_limit_date_picker_disable_specific_weekday', 10 );
En el fragmento, el return (date.getDay() === 0); deshabilita solo los domingos. Cada día está representado por un número específico.
- 1 = Lunes
- 2 = Martes
- 3 = Miércoles
- 4 = Jueves
- 5 = Viernes
- 6 = Sábado
- 7 = Domingo
Simplemente encuentra la representación numérica de tu día específico y actualiza el fragmento para que coincida con el día deseado.
La window.wpforms_420_1 representa el ID del formulario (420) y el ID del campo para nuestro Selector de Fecha (_1). Necesitarás actualizar estos dos IDs para que coincidan con tu propio ID de formulario e ID de campo.
Para obtener ayuda para encontrar los números de ID de tu formulario y campo, consulta este tutorial.
Cambiar el día de inicio del calendario
Para cambiar el día del selector de fecha para que muestre el que inicia la semana, usarás este fragmento. Ten en cuenta que el lunes representa el número uno y los días de la semana continúan en orden numérico.
/**
* Change the start day of the week
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_set_start_day() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
"locale": {
// Enter the number for the day you want the week to start
// 1 = Monday; 2 = Tuesday; 3 = Wednesday; 4 = Thursday; 5 = Friday; 6 = Saturday; 7 = Sunday
"firstDayOfWeek": 1 // start week on Monday
}
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_set_start_day', 10 );
Deshabilitar fechas futuras
Usar este fragmento establecerá la fecha máxima como la fecha de hoy (actual), por lo que los usuarios no podrán seleccionar fechas futuras.
/**
* Disable future dates
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
// Don't allow users to pick past dates
maxDate: new Date(),
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Seleccionar un ID de formulario específico y un ID de campo dentro del selector de fecha
Al usar el Selector de Fecha, puedes seleccionar un solo formulario o un campo de Fecha específico dentro de un formulario específico.
En los fragmentos de ejemplo a continuación, verás window.wpforms_21_1. Donde el _21 representa el ID del formulario y el _1 representa el ID del campo.
Si necesitas ayuda para encontrar los números de ID de tu formulario y campo, consulta este tutorial.
Aquí tienes un par de fragmentos de código. El primero permitirá la selección de solo los últimos 30 días:
/**
* Only allow for a selection of only the past 30 days
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past and exclude future dates
minDate: new Date().fp_incr(-30)
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
El siguiente fragmento de código permitirá la selección de los últimos 30 días y "hoy":
/**
* Only allow for a selection of the past 30 days and "today"
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_limit_date_picker() {
?>
<script type="text/javascript">
window.wpforms_21_1 = window.wpforms_21_1 || {};
window.wpforms_21_1.datepicker = {
disableMobile: true,
// Don't allow users to pick more than 30 days in the past
minDate: new Date().fp_incr(-30),
maxDate: "today"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_limit_date_picker', 10 );
Limitar a un solo día del mes actual
En este ejemplo, solo aceptaremos citas para un solo día del mes actual.
/**
* Limit to 1 single day for the current month only.
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_one_day_current_month( ) {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
disableMobile: true,
disable: [
function(date) {
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
var selectedMonth = date.getMonth();
var selectedYear = date.getFullYear();
if (selectedMonth !== currentMonth || selectedYear !== currentYear) {
return false;
}
var day = date.getDay();
var firstDayOfMonth = new Date(selectedYear, selectedMonth, 1).getDay();
var offset = (day >= firstDayOfMonth) ? (day - firstDayOfMonth) : (day + 7 - firstDayOfMonth);
var secondThursday = new Date(selectedYear, selectedMonth, offset + 8);
if (date.getDate() === secondThursday.getDate() && day === 4) {
return false;
}
return true;
}
]
};
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_one_day_current_month', 30 );
En este ejemplo, estamos estableciendo dinámicamente una fecha mínima para un segundo campo de selección de fecha, asegurando que sea al menos 21 días después de la primera fecha seleccionada.
/**
* Add 21 days to the first date selection to block these days from the second selection
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options/
*/
function wpf_dev_block_days_date_selection( ) {
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$( "#wpforms-1277-field_19" ).flatpickr({
dateFormat: "m/d/Y",
onClose: function( selectedDates, dateStr, instance ) {
if ( selectedDates.length > 0 ) {
var minSecondDate = new Date( selectedDates[0] );
// Adding 21 days to the selected 1st date
minSecondDate.setDate( minSecondDate.getDate() + 21 );
$( "#wpforms-1277-field_20" ).flatpickr({
minDate: minSecondDate,
dateFormat: "m/d/Y"
});
}
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_block_days_date_selection', 30 );
Traducir Subetiquetas de Fecha y Hora
Para traducir las subetiquetas "Fecha" y "Hora" en el campo Fecha/Hora, puedes usar este fragmento de código:
``/**
* Translate Date and Time sublabels in the Date/Time field
*
* @link https://wpforms.com/developers/customize-the-date-time-field-date-options
*/
function custom_translate_date_time_sublabels( $properties, $field, $form_data ) {
// Check if the field is of type 'date-time'
if ( 'date-time' === $field['type'] ) {
// Change the sublabel for the date field
if ( isset( $properties['inputs']['date']['sublabel']['value'] ) ) {
$properties['inputs']['date']['sublabel']['value'] = __( 'Your Translated Date Label');
}
// Change the sublabel for the time field
if ( isset( $properties['inputs']['time']['sublabel']['value'] ) ) {
$properties['inputs']['time']['sublabel']['value'] = __( 'Your Translated Time Label');
}
}
return $properties;
}
add_filter( 'wpforms_field_properties', 'custom_translate_date_time_sublabels', 10, 3 );
Para usar este fragmento:
- Reemplaza 'Tu Etiqueta de Fecha Traducida' con tu traducción deseada para "Fecha"
- Reemplaza 'Tu Etiqueta de Hora Traducida' con tu traducción deseada para "Hora"
Por ejemplo, para traducir las etiquetas al español:
$properties['inputs']['date']['sublabel']['value'] = __( 'Fecha');
$properties['inputs']['time']['sublabel']['value'] = __( 'Tiempo');
Un último recordatorio, por favor recuerda que si estás usando alguna de las fragmentos de código en este documento, las opciones del constructor de formularios para limitar deben estar desactivadas. Para saber más sobre las opciones integradas para limitar las fechas, consulta esta documentación.
¡Y eso es todo lo que necesitas para personalizar el Selector de Fecha Desplegable o el Selector de Fecha! ¿Te gustaría personalizar el selector de fecha para permitir un rango de fechas o fechas múltiples? Prueba nuestro tutorial sobre Cómo Permitir Rango de Fechas o Fechas Múltiples en el Selector de Fecha.