¿Desea personalizar las opciones de fecha del campo fecha/hora en WPForms? El campo Fecha / Hora incluye dos opciones de formato para el selector de fecha: Date Picker, que proporciona al usuario un calendario, o Date Dropdown.
Con el lanzamiento de la versión 1.6.3, WPForms le da 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 necesita hacer, por favor revise esta documentación.
Este tutorial se centrará más en la personalización del campo Desplegable de fechas y en el cálculo de bloques de fechas para el Selector de fechas.
Es importante recordar que si está utilizando cualquiera de los fragmentos de código de este documento, las opciones de limitación del constructor de formularios deben estar desactivadas. Para obtener más información sobre las opciones integradas para limitar las fechas, consulte esta documentación.
Creación del formulario
Antes de añadir cualquier fragmento, necesitará crear su formulario y añadir sus campos. Dado que este tutorial se basa en el campo desplegable de fecha, tendrá que añadir al menos un campo de fecha.
Si necesita ayuda para crear su formulario, consulte este tutorial.
Una vez que hayas añadido tus campos de fecha, asegúrate de haber seleccionado el desplegable Tipo a Fecha. Puede establecer el tipo de fecha haciendo clic en las opciones avanzadas del campo de formulario.
Personalización del campo Fecha
Para personalizar el campo Fecha, tendrá que añadir uno de los fragmentos de código siguientes a su sitio.
Si necesitas ayuda para aprender a añadir fragmentos de código a tu sitio, consulta este tutorial.
Algunos de los siguientes fragmentos de código requerirán el uso de información específica de ID de formulario e ID de campo.
Uso de fragmentos en el desplegable de fechas
Limitar el número de días del desplegable para que coincida con el mes
Para que el campo Días coincida con la cantidad de días disponibles para ese mes en particular, utilizaría 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 );
Limitación de meses, días y años en el desplegable de fechas
Los siguientes fragmentos actualizarán los campos desplegables para que sólo aparezcan del 5 al 12 (de mayo a diciembre) para los meses disponibles, del 20 al 31 para los días disponibles y del 2020 al 2021 para los años disponibles. Puede modificar los campos según sea necesario.
Esto puede aplicarse de dos maneras diferentes:
- Todos los campos desplegables de fecha dentro de un formulario específico
- Un desplegable de fecha específica dentro de un formulario específico.
Todos los campos desplegables de fecha dentro de un formulario específico
El siguiente fragmento sólo se aplicará al 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
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 );
Dirigir un desplegable de fechas específico dentro de un formulario específico
Abajo se aplicará al desplegable de fecha con el campo ID 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 );
Inicio del desplegable de fecha a partir de "hoy
En su desplegable de fecha, puede hacer que el mes, el día y el año empiecen automáticamente por defecto con el mes, el día y el año de hoy utilizando 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 fechas
Desactivar fechas pasadas y mostrar sólo los próximos 31 días
En este fragmento, vamos a desactivar cualquier fecha pasada y sólo permitiremos la selección hasta 31 días a partir de la fecha actual para el ID del formulario 1137 y el campo ID 14. Recuerde cambiar estos IDs para que coincidan con su propio ID de formulario y campo. Si no está seguro de dónde encontrar estos ID, revise 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 nuevo Date().fp_incr(-1) puede controlar fácilmente cuántos días minDate y maxDate mostrar simplemente incrementando el número. Usando el símbolo negativo (-) delante del número significa que estos serán días en el pasado.
Como sólo queremos que nuestro formulario empiece desde ayer, empezaremos con la minFecha sólo permitiendo el (-1) y terminaremos con el (1) (por lo que incluirá hoy y mañana) para la maxFecha
/**
* 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 para el selector de fechas
Puede utilizar fácilmente este fragmento de código que excluirá todos los días anteriores (incluido hoy).
Simplemente cambie el +1), para que sea el número de días que desee 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 intervalos de fechas específicos para el selector de fechas
Para bloquear intervalos de fechas específicos dentro del selector de fechas, utilice 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 );
Limitar la distancia con la que los usuarios pueden elegir las fechas dentro del selector de fechas.
Si desea limitar la fecha futura que los usuarios pueden seleccionar dentro del selector de fecha, utilice 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 dentro del selector de fechas
Para limitar todos los días pasados y los lunes futuros, utilice 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, vamos a mostrar 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 );
Desactivar un día concreto de la semana
Para este ejemplo, queremos desactivar completamente los domingos de nuestro selector de fechas utilizando 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 retorno (date.getDay() === 0); desactiva sólo 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
Sólo tiene que encontrar la representación numérica de su día concreto y actualizar el fragmento para que coincida con el día deseado.
El window.wpforms_420_1 representa el ID del formulario(420) y el ID del campo para nuestro Selector de Fecha(_1). Tendrá que actualizar estos dos ID para que coincidan con su propio ID de formulario e ID de campo.
Si necesita ayuda para encontrar sus números de ID de formulario y campo, consulte este tutorial.
Cambiar el día de inicio del calendario
Para cambiar el día del selector de fecha para mostrar que comienza la semana, usarás este snippet. Tenga 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 );
Desactivar fechas futuras
El uso de este fragmento establecerá la maxDate como la fecha de hoy (actual), por lo que el usuario no podrá 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 );
ID de formulario e ID de campo específicos dentro del selector de fecha
Al utilizar el selector de fecha, puede seleccionar un formulario o un campo de fecha específico dentro de un formulario específico.
En los siguientes ejemplos, verá window.wpforms_21_1. Donde _21 representa el ID del formulario y _1 representa el ID del campo.
Si necesita ayuda para encontrar los números de identificación de sus formularios y campos, consulte este tutorial.
He aquí un par de fragmentos de código. El primero permitirá seleccionar sólo 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á seleccionar 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 sólo el mes en curso
En este ejemplo, sólo vamos a aceptar citas para un único día del mes en curso.
/**
* 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, asegurándonos de 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 );
Traducción de las sub-etiquetas de fecha y hora
Para traducir las subetiquetas "Fecha" y "Hora" del campo Fecha/Hora, puede utilizar 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 utilizar este fragmento:
- Sustituya "Su etiqueta de fecha traducida" por la traducción que desee para "Fecha".
- Sustituya "Su etiqueta de tiempo traducida" por la traducción que desee para "Tiempo".
Por ejemplo, para traducir las etiquetas al español:
$properties['inputs']['date']['sublabel']['value'] = __( 'Fecha');
$properties['inputs']['time']['sublabel']['value'] = __( 'Tiempo');
Un recordatorio final, por favor recuerde que si usted está usando cualquiera de los fragmentos de código en este documento, las opciones del constructor de formularios para limitar deben estar desactivadas. Para obtener más información sobre las opciones integradas para limitar las fechas, consulte esta documentación.
Y eso es todo lo que necesita para personalizar el desplegable de fechas o el selector de fechas. ¿Le gustaría personalizar el selector de fecha para permitir un rango de fechas o múltiples fechas? Pruebe nuestro tutorial sobre Cómo Permitir un Rango de Fechas o Múltiples Fechas en el Selector de Fechas.