Como Modificar as Strings do Seletor de Data do Campo de Data

Você precisa modificar as strings do seletor de datas para meses (longos e curtos)? Nós 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 padrão, as strings do calendário do Seletor de Datas estão em inglês e o primeiro dia da semana do calendário será o domingo.

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

Modificando as strings do seletor de datas

Ajustando o código abaixo, você pode modificar ou traduzir as strings usadas para dias e meses no calendário, além de ajustar o primeiro dia da semana.

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

Você precisará copiar o código abaixo e adicioná-lo ao seu site. Em seguida, modifique o idioma para corresponder ao que você precisa.

Se precisar de ajuda sobre como e onde adicionar trechos ao seu site, por favor, confira 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 visualizar o seu dropdown do Seletor de Datas, você verá as alterações instantaneamente.

E é isso! Você atualizou com sucesso a string para os meses do Seletor de Datas. Gostaria de personalizar ainda mais o campo Data / Hora? Dê uma olhada em nosso artigo sobre Como Personalizar as Opções de Data do Campo Data e Hora.

Ação de Referência

wpforms_wp_footer