¡Atención!

Este artículo contiene código PHP y está destinado a desarrolladores. Ofrecemos este código como cortesía, pero no proporcionamos soporte para personalizaciones de código o desarrollo de terceros.

Para obtener ayuda adicional, consulta el tutorial de WPBeginner sobre cómo añadir código personalizado.

Descartar

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

¿Necesitas modificar las cadenas del selector de fecha para los meses (largos y cortos), así como para los días? En este tutorial, te 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, el Selector de fecha utiliza el idioma de tu sitio y comienza la semana el día establecido en Ajustes » Generales » La semana comienza el.

Así es como se ve el selector de fechas del campo de fecha por defecto

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.

Así es como se ve el selector de fechas ahora que hemos cambiado nuestro idioma

Alternativamente, también podría traducir el selector de fechas usando una biblioteca de un script, simplemente siga los pasos de esta documentación también.

¡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