Cómo Crear Formatos Adicionales para el Campo de Fecha

¿Te gustaría personalizar cómo se muestran las fechas en tus formularios? Aunque WPForms proporciona tres formatos de fecha predeterminados en el selector de fechas del campo Fecha / Hora, puedes añadir fácilmente más formatos para que coincidan con tus necesidades.

Esta guía te mostrará cómo crear formatos de fecha personalizados utilizando PHP.

Por defecto, el Selector de fechas del campo Fecha / Hora proporciona tres formatos de fecha diferentes para elegir.

Configuración de formatos de fecha personalizados

Para añadir nuevos formatos de fecha, necesitarás añadir un fragmento de código a tu sitio. Si no estás seguro de cómo añadir código personalizado, por favor consulta nuestra guía sobre cómo añadir fragmentos de código.

/**
 * Add additional formats for the Date field Date Picker
 *
 * @link https://wpforms.com/developers/how-to-create-additional-formats-for-the-date-field/
 */
function wpf_dev_date_field_formats( $formats ) {
    // Item key is JS date character - see https://flatpickr.js.org/formatting/
    // Item value is in PHP format - see http://php.net/manual/en/function.date.php
    
    // Adds new format Monday, 20th December 2021
    $formats[ 'l, J F Y' ] = 'l, jS F Y';
    
    return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );

Este formato de fecha nos permitirá introducir la fecha completa en un formato más largo lunes, 20 de diciembre de 2021. Para encontrar más formatos como este, consulta la documentación oficial de formatos de PHP.

Uso de separadores personalizados

Para cambiar el separador de fecha (por ejemplo, de / a -), utiliza este código:

/**
 * Change date separator format
 */
function wpf_dev_date_field_formats( $formats ) {
    // Adds new format 24-07-2021
    $formats[ 'j-m-y' ] = 'j-m-y';
    return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );

Añadir palabras a los formatos de fecha

Para incluir palabras en tu formato de fecha (como "lunes, 20 de diciembre de 2021"), utiliza este código:

/**
 * Add words to date format
 */
function wpf_dev_date_field_formats( $formats ) {
    // Adds new format Monday, 20th of December 2021
    $formats[ 'l, J \of F Y' ] = 'l, jS \of F Y';
    return $formats;
}
add_filter( 'wpforms_datetime_date_formats', 'wpf_dev_date_field_formats', 10, 1 );

Creación del formulario

A continuación, vamos a crear nuestro formulario y añadir nuestros campos. Esto incluirá un campo de formulario Fecha / Hora.

Si necesitas ayuda para crear un formulario, por favor consulta esta documentación.

Una vez que hayas añadido tu campo de formulario Fecha / Hora, haz clic en la pestaña Opciones del campo y selecciona Avanzado para elegir el Formato y seleccionar tu nuevo formato.

Y eso es todo lo que necesitas para crear formatos de fecha adicionales para el Selector de fechas de tu campo Fecha. ¿Te gustaría personalizar también el Selector de horas? Por favor, revisa nuestro tutorial sobre Cómo personalizar el selector de horas del campo Fecha y Hora.

Filtro de Referencia

Referencia de filtro: wpforms_datetime_date_formats