Cómo personalizar la etiqueta inteligente de fecha

¿Te gustaría personalizar cómo aparecen las fechas en tus formularios usando etiquetas inteligentes? Si bien WPForms incluye una etiqueta inteligente integrada para mostrar la fecha actual, puedes personalizar su formato para que se ajuste a tus necesidades.

Esta guía te mostrará cómo usar etiquetas inteligentes en las etiquetas de los campos y personalizar el formato de la etiqueta inteligente de fecha.

Entendiendo las etiquetas inteligentes

Antes de empezar, quizás quieras revisar nuestra guía completa sobre etiquetas inteligentes para conocer todas las opciones predeterminadas disponibles. Para este tutorial, nos centraremos en crear un formulario con un campo de casilla de verificación que incluya la fecha actual en su etiqueta.

Creación de su formulario

Creemos un formulario de carga de libros digitales con una casilla de verificación obligatoria para términos y condiciones. Esta casilla de verificación incluirá la fecha actual en su etiqueta.

Una vez que crees tu formulario y agregues tu campo de Casilla de verificación, agrega esta etiqueta inteligente dentro de la etiqueta de este campo:

{date format="m/d/Y"}

Habilitar etiquetas inteligentes en las etiquetas de los campos

Primero, necesitamos agregar un fragmento de código que permita etiquetas inteligentes en las etiquetas de los campos de casilla de verificación. Si no estás seguro de cómo agregar código personalizado a tu sitio, consulta nuestra guía para agregar fragmentos de código.

/**
 * Enable Smart Tags in Checkbox field labels
 *
 * @link https://wpforms.com/developers/how-to-customize-date-format-in-the-date-smart-tag/
 */
function wpf_dev_checkbox_choices_process_smarttags( $field, $deprecated, $form_data ) {
    foreach ( $field[ 'choices' ] as $key => $choice ) {
        if ( ! empty( $choice[ 'label' ] ) ) {
            $field[ 'choices' ][ $key ][ 'label' ] = apply_filters(
                'wpforms_process_smart_tags', 
                $choice[ 'label' ], 
                $form_data 
            );
        }
    }
    return $field;
}
add_filter( 'wpforms_checkbox_field_display', 'wpf_dev_checkbox_choices_process_smarttags', 10, 3 );

Este código permite el uso de etiquetas inteligentes en cualquier etiqueta de campo de casilla de verificación en todos tus formularios.

Personalizar el formato de fecha

Por defecto, la etiqueta inteligente de fecha utiliza el formato m/d/Y. Aquí te explicamos qué significa cada parte:

• m/ : Mes con ceros iniciales (01-12)
• d/ : Día con ceros iniciales (01-31)
• Y : Año completo en cuatro dígitos (por ejemplo, 2024)

Para personalizar el formato de fecha, modifica el parámetro de formato de la etiqueta inteligente. Por ejemplo:

{date format="Y-m-d H:i:s"}

Este formato mostrará:

• Año primero (Y)
• Seguido del mes (m)
• Luego el día (d)
• Más la hora en horas (H), minutos (i) y segundos (s)

Personalización avanzada de fechas

¿Quieres agregar días a tu fecha? Aquí tienes un fragmento que agrega dos días a la fecha actual:

/**
 * Add 2 days to the Date Smart Tag
 *
 * @link https://wpforms.com/developers/how-to-customize-date-format-in-the-date-smart-tag/
 */
function wpf_dev_process_smarttag_date_plus_two( $content, $tag ) {
    // Only run if it is our desired tag
    if ( 'current_date_plus_two' === $tag ) {
        date_default_timezone_set( 'US/Eastern' );
        $link = date( 'Y-m-d', strtotime( '+2 days' ) ); // Output current date plus 2 days
        
        // Replace the tag with our link
        $content = str_replace( '{current_date_plus_two}', $link, $content );
    }
    return $content;
}
add_filter( 'wpforms_smart_tag_process', 'wpf_dev_process_smarttag_date_plus_two', 10, 2 );

¡Eso es todo! Ahora sabes cómo personalizar la etiqueta inteligente de fecha. A continuación, ¿te gustaría mejorar aún más tus formularios? Consulta nuestra guía sobre cómo crear un ID único para cada entrada del formulario para más detalles.

Filtro de Referencia

wpforms_checkbox_field_display