Cómo modificar las cadenas del selector de fechas del campo de fecha

¿Necesita modificar las cadenas del selector de fechas para los meses (largos y cortos)? También le mostraremos cómo cambiar este texto usando PHP.

El Selector de fechas de WPForms se genera utilizando el script de fecha Flatpickr, que crea el selector de fechas usando JavaScript.

Por defecto, las cadenas de idioma del calendario del Selector de fechas están en inglés y el primer día de la semana del calendario será el domingo.

Si desea localizar las cadenas de idioma utilizadas en el Selector de fechas, tenemos un tutorial separado con más detalles.

Modificar las cadenas del selector de fechas

Ajustando el código a continuación, puede modificar o traducir las cadenas utilizadas para los días y meses en el calendario, así como ajustar el primer día de la semana.

En este ejemplo, hemos traducido los días y meses al francés y también hemos cambiado el primer día de la semana al lunes.

Necesitará copiar el código a continuación y agregarlo a su sitio. Luego modifique el idioma para que coincida con lo que necesita.

Si necesita ayuda sobre cómo y dónde agregar fragmentos a su sitio, consulte este tutorial.

/**
 * Translate strings for WPForms date picker and modify the first day of the week.
 *
 * @link https://wpforms.com/developers/modify-date-field-date-picker-strings/
 */

function wpforms_flatpickr_l10_strings_customization() {
   ?>

   <script type="text/javascript">

      (function () {
         if ( typeof flatpickr === 'undefined' ) {
            return;
         }

         if ( ! flatpickr.hasOwnProperty( 'l10ns' ) ) {
            return;
         }

         var flatpickrL10n = flatpickr.l10ns.default;

         if ( typeof wpforms_settings !== 'undefined' && wpforms_settings.hasOwnProperty( 'locale' ) ) {
            flatpickrL10n = Object.assign( {}, flatpickrL10n )
            flatpickr.l10ns[wpforms_settings.locale] = flatpickrL10n;
         }

         flatpickrL10n.firstDayOfWeek = 1;

         flatpickrL10n.weekdays       = {
            shorthand: [ 'Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam' ],
            longhand : [ 'Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi' ]
         };

         flatpickrL10n.months         = {
            shorthand: [ 'Janv', 'Févr', 'Mars', 'Avr', 'Mai', 'Juin', 'Juil', 'Août', 'Sept', 'Oct', 'Nov', 'Déc' ],
            longhand : [ 'Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre' ]
         };

      })();

   </script>
   <?php
}
add_action( 'wpforms_wp_footer_end', 'wpforms_flatpickr_l10_strings_customization' );

Ahora, cuando vea su menú desplegable del Selector de fechas, verá los cambios al instante.

¡Y eso es todo! Ha actualizado con éxito la cadena de los meses del Selector de fechas. ¿Le gustaría personalizar aún más el campo de Fecha / Hora? Eche un vistazo a nuestro artículo sobre Cómo personalizar las opciones de fecha del campo de fecha y hora.

Acción de referencia

wpforms_wp_footer