Resumen de IA
¿Le gustaría que su selector de fechas se cargara con una fecha predeterminada? Al usar el formato Selector de fechas en el campo de formulario Fecha/Hora, puede seleccionar fácilmente una fecha de una ventana emergente. Pero, ¿sabía que también puede establecer fácilmente una fecha predeterminada para este campo que comience con la fecha de hoy? En este tutorial, le mostraremos cómo lograr esto.
Es importante recordar que si está utilizando un fragmento de código para limitar el campo del selector de fechas, las opciones del generador de formularios para limitar deben estar desactivadas.
Creación del formulario
Primero, deberá crear su formulario y agregar el campo de formulario Fecha/Hora a su formulario. En la pestaña Avanzado, asegúrese de haber seleccionado Selector de fechas para el Tipo.
Si necesita ayuda para crear su formulario, revise este tutorial.
Tenga en cuenta que los fragmentos de ejemplo en este tutorial son específicamente para ejemplos de uso único. Si planea usar varios de estos fragmentos de código a la vez, deberá asegurarse de que cada nombre de función sea único o puede agruparlos todos en una sola función.
Establecer la fecha predeterminada
Con cualquiera de los fragmentos, deberá copiarlos y pegarlos en su sitio. Si necesita ayuda sobre cómo agregar fragmentos a su sitio, revise este tutorial.
Agregar el fragmento de código para todos los selectores de fechas
/**
* Set today's date as default date for all date pickers.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
Agregar el fragmento de código para selectores de fechas dentro de un formulario específico
Para establecer una fecha predeterminada para los Selectores de fechas dentro de un formulario específico, puede usar este fragmento, pero cambie el _1287 para que coincida con su propio ID de formulario. Si necesita ayuda sobre cómo encontrar su ID de formulario, consulte este tutorial.
/**
* Set today's date as default date for all date pickers inside the specific form.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
// Run this on all date pickers inside the form ID 1287
window.wpforms_1287 = window.wpforms_1287 || {};
window.wpforms_1287.datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
Agregar el fragmento de código para un campo selector de fechas específico dentro de un formulario específico
Para establecer una fecha predeterminada para un campo específico dentro de un formulario específico, puede usar este fragmento, pero cambie el _1287 para que coincida con su propio ID de formulario y actualice el _4 para que coincida con el ID del campo. Si necesita ayuda sobre cómo encontrar su ID de formulario, consulte este tutorial.
/**
* Set today's date as default date for a specific date picker inside a specific form.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
// Run this on the date field ID 4 inside the form ID 1287
window.wpforms_1287_4 = window.wpforms_1287_4 || {};
window.wpforms_1287_4.datepicker = {
defaultDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
Y eso es todo lo que necesita para establecer una fecha predeterminada. Cuando la página se cargue, el campo Fecha cargará automáticamente la fecha actual.
¿Le gustaría también aprender a establecer un rango de fechas o varias fechas que se puedan seleccionar de su selector de fechas? Consulte nuestro artículo sobre Cómo permitir rangos de fechas o fechas múltiples en el selector de fechas.
Acción de referencia
Preguntas frecuentes
¿Puedo simplemente establecer una fecha predeterminada por un nombre de clase CSS personalizado?
R: ¡Absolutamente! Primero, asegúrese de haber agregado un nombre de clase en su campo de formulario Fecha/Hora desde la pestaña Avanzado.
En nuestro ejemplo, el nombre de la clase CSS que estamos usando es customdatecode.
Una vez que haya guardado el nombre de la clase CSS del formulario, agregue este fragmento de código a su sitio.
/**
* Set today's date as default date for all date pickers from a CSS class name.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
jQuery( '.customdatecode' ).each( function () {
var form = jQuery( this ).closest( '.wpforms-form' ),
formID = form.data( 'formid' ),
fieldID = jQuery(this).data('field-id' );
window['wpforms_' + formID + '_' + fieldID] = {
datepicker: {
defaultDate: 'today',
disableMobile: 'true'
}
}
} );
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );
Ahora, en cualquier formulario que tenga un selector de fechas con ese nombre de clase CSS, se establecerá automáticamente la fecha de hoy como la fecha de ese campo.
¿Funcionará en dispositivos móviles?
R: Los dispositivos móviles varían en cuanto a la funcionalidad predeterminada del sistema operativo, por lo que la fecha no se rellenará automáticamente al verla desde dispositivos móviles.
¿Cómo puedo establecer la fecha mínima y la fecha predeterminada para la fecha actual?
¡Absolutamente! Para establecer la fecha predeterminada y la fecha mínima en su selector de fechas a la fecha de hoy, simplemente use este fragmento de código.
/**
* Set today's date as the default and minimum date for all date pickers.
*
* @link https://wpforms.com/developers/how-to-set-a-default-date-for-your-date-picker-form-field/
*/
function wpf_dev_date_picker_default() {
?>
<script type="text/javascript">
window.wpforms_datepicker = {
defaultDate: "today",
minDate: "today",
disableMobile: "true"
}
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_date_picker_default', 30 );