日付フィールドの日付ピッカー文字列を変更する方法

月（長短）の日付ピッカー文字列を変更する必要はありますか？PHPを使用してこのテキストを変更する方法を説明します。

WPFormsの日付ピッカーは、JavaScriptを使用して日付ピッカーを構築するFlatpickr日付スクリプトを使用して生成されます。

デフォルトでは、日付ピッカーカレンダーの文字列は英語で、カレンダー週の最初の曜日は日曜日になります。

日付ピッカーで使用される言語文字列をローカライズしたい場合は、詳細については別のチュートリアルをご覧ください。

日付ピッカー文字列の変更

以下のコードを調整することで、カレンダーで使用される曜日と月の文字列を変更または翻訳したり、週の最初の曜日を調整したりできます。

この例では、曜日と月をフランス語に翻訳し、週の最初の曜日を月曜日に変更しました。

以下のコードをコピーしてサイトに追加する必要があります。次に、必要に合わせて言語を変更してください。

スニペットをサイトに追加する方法と場所についてサポートが必要な場合は、このチュートリアルをご覧ください。

/**
 * 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' );

これで、日付ピッカードロップダウンを表示すると、変更がすぐに表示されます。

これで、日付ピッカー月の文字列を正常に更新しました。日付/時刻フィールドをさらにカスタマイズしますか？日付時刻フィールドの日付オプションのカスタマイズ方法に関する記事をご覧ください。

参照アクション

wpforms_wp_footer