¿Desea que el selector de fecha se cargue con una fecha predeterminada? Al utilizar el formato Selector de fecha en el campo de formulario Fecha/Hora, puede seleccionar fácilmente una fecha en 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 lograrlo.
Es importante recordar que si está utilizando un fragmento de código para limitar el campo Selector de fecha, cualquier opción del constructor de formularios para limitar debe estar desactivada.
Creación del formulario
En primer lugar, tendrá que crear su formulario y añadir el campo Fecha/Hora a su formulario. En la pestaña Avanzado, asegúrese de que ha seleccionado Selector de fecha para el Tipo.
Si necesita ayuda para crear su formulario, consulte este tutorial.
Tenga en cuenta que los fragmentos de código de ejemplo de este tutorial son específicamente para ejemplos de un solo uso. Si usted está planeando utilizar varios de estos fragmentos de código a la vez tendrá que asegurarse de que cada nombre de función es único o puede agruparlos todos en una sola función.
Fijar la fecha por defecto
Con cualquiera de los snippets, necesitarás copiarlos y pegarlos en tu sitio. Si necesitas ayuda sobre cómo añadir snippets a tu sitio, revisa este tutorial.
Añadir el fragmento de código para todos los selectores de fecha
/**
* 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 );
Añadir el fragmento de código para los selectores de fecha dentro de un formulario específico
Para establecer una fecha por defecto para los Datepickers dentro de un formulario específico, puede utilizar este fragmento, pero cambiar el _1287 para que coincida con su propio ID de formulario. Si necesita ayuda para encontrar el ID de su 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 );
Añadir el fragmento de código para un campo selector de fecha específico dentro de un formulario específico
Para establecer una fecha por defecto para un campo específico dentro de un formulario específico, puede utilizar este fragmento, pero cambiar el _1287 para que coincida con su propio ID de formulario y actualizar el _4 para que coincida con el ID de campo. Si necesita ayuda para encontrar el ID de su 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 necesitas para establecer una fecha por defecto. Cuando se cargue la página, el campo Fecha cargará automáticamente la fecha actual.
¿Le gustaría también aprender cómo establecer un rango de fechas o múltiples fechas que pueden ser seleccionadas desde su selector de fechas? Echa un vistazo a nuestro artículo sobre Cómo Permitir Rango de Fechas o Múltiples Fechas en el Selector de Fechas.
Acción de referencia
PREGUNTAS FRECUENTES
¿Puedo establecer una fecha por defecto mediante un nombre de clase CSS personalizado?
R: ¡Por supuesto! Primero asegúrese de que ha añadido 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 utilizando es customdatecode.
Una vez que hayas guardado el nombre de la clase CSS del formulario, añade este fragmento de código a tu 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 fecha dentro de él con ese nombre de clase CSS, se establecerá automáticamente la fecha de hoy como la fecha para ese campo.
P: ¿Funcionará en dispositivos móviles?
R: Los dispositivos móviles varían con la funcionalidad por defecto del sistema operativo, por lo que la fecha no se rellenará automáticamente cuando se visualice desde dispositivos móviles.
P: ¿Cómo puedo establecer la fecha mínima y la fecha por defecto para la fecha actual?
R: ¡Por supuesto! Para establecer la fecha por defecto y la fecha mínima en su selector de fecha a la fecha de hoy, sólo tiene que utilizar este fragmento.
/**
* 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 );