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

Você precisa modificar as strings do seletor de data para meses (longos e curtos), bem como dias? Neste tutorial, mostraremos como alterar esse 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, o Seletor de Data usa o idioma do seu site e inicia a semana no dia definido em Configurações » Geral » Iniciar semana em.

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