Como modificar as strings do seletor de datas do campo de data

Precisa modificar as strings do seletor de datas para meses (longos e curtos)? Mostraremos como alterar este texto usando PHP.

O Seletor de Datas do WPForms é gerado usando o script de data Flatpickr, que constrói o seletor de datas usando JavaScript.

Por defeito, as strings do calendário do Seletor de Datas estão em inglês e o primeiro dia da semana do calendário será Domingo.

Se desejar localizar as strings de idioma usadas no Seletor de Datas, temos um tutorial separado com mais detalhes.

Modificar strings do seletor de datas

Ajustando o código abaixo, pode modificar ou traduzir as strings usadas para dias e meses no calendário, bem como ajustar o primeiro dia da semana.

Neste exemplo, traduzimos os dias e meses para francês e também alteramos o primeiro dia da semana para segunda-feira.

Terá de copiar o código abaixo e adicioná-lo ao seu site. Depois modifique o idioma para corresponder ao que precisa.

Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, por favor, 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' );

Agora, ao ver o seu menu suspenso do Seletor de Datas, verá as alterações instantaneamente.

E é tudo! Atualizou com sucesso a string para os meses do Seletor de Datas. Gostaria de personalizar ainda mais o campo Data / Hora? Dê uma vista de olhos ao nosso artigo sobre Como Personalizar as Opções de Data do Campo Data Hora.

Ação de Referência

wpforms_wp_footer