How to Localize the Date Picker Strings

Are you interested in localizing the Date Picker strings within WPForms? This process involves extending the library to translate these strings into languages other than English. In this tutorial, we’ll guide you through the fundamentals of localizing Date Picker strings using JavaScript.

WPForms utilizes the Flatpickr date script to generate its Date Picker. Flatpickr constructs the date picker using JavaScript. With over 25 languages available, Flatpickr offers extensive language support, making it easy to localize Date Picker strings.

Localizing the date picker strings

Localization allows you to adapt your WordPress site and its plugins to different languages, ensuring a seamless experience for users worldwide. In this tutorial, we’ll guide you through the process of localizing date picker strings in WPForms, making it easy for users to interact with forms in their preferred language.

1) Finding the URL and language code

To find the URL for your specific language that you’ll need for this snippet, navigate to the Flatpickr GitHub Repository and locate the language file corresponding to your preferred language, such as es for Spanish or fr for French. Once you’ve found the appropriate language file, construct a URL using the following format:

https://npmcdn.com/[email protected]/dist/l10n/{language_code}.js

Replace {language_code} with the code of your chosen language. For example, if you’re localizing into French, your URL would be:

https://npmcdn.com/[email protected]/dist/l10n/fr.js

This URL will provide you with the necessary JavaScript file containing the localized Date Picker strings for your chosen language.

2) Loading the date picker locale

The first step to figure out the correct URL for your wpforms-datepicker-locale. You’ll need to add this snippet to your site. If you need any assistance on how and where to add snippets, please check out this tutorial.

For the purpose of this tutorial, we’re going to use Spanish, so in the snippet below, you’ll notice that we’re enqueuing the script https://npmcdn.com/[email protected]/dist/l10n/es.js. As mentioned earlier, all we’ve done here is change the fr.js to es.js to load the Spanish locale.

/**
 * Load the date picker locale strings.
 *
 * @link https://wpforms.com/developers/localize-the-date-picker-strings/
 */
 
function wpf_dev_datepicker_locale( $forms ) {
   if ( true === wpforms_has_field_type( 'date-time', $forms, true )){
    wp_enqueue_script( 
        'wpforms-datepicker-locale', 
            'https://npmcdn.com/[email protected]/dist/l10n/es.js',
        array( 'wpforms-flatpickr' ), 
        null, 
        true
    );
 }
	
}
add_action( 'wpforms_frontend_js', 'wpf_dev_datepicker_locale', 10 );

3) Apply the localization

The second step is to apply the localization of the Date Pickers to the page, which is done via JavaScript.

/**
 * Apply the date picker locale strings.
 *
 * @link https://wpforms.com/developers/localize-the-date-picker-strings/
 */

function wpf_dev_datepicker_apply_locale() {
    ?>

    <script type="text/javascript">
    jQuery( document ).ready( function() {

        jQuery( '.wpforms-datepicker-wrap' ).each( function() {
            var calendar = this._flatpickr;

            if ( 'object' === typeof calendar ) {
                calendar.set( 'locale', 'es' );
            }

        } );

    } );

    </script>

    <?php
}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_datepicker_apply_locale', 10 );

When your visitors open the date picker, they can see the localization.

Adding conditional logic (optional)

Lastly, if you are using the WPML plugin, then the date picker localization can be conditionally loaded. This way the date picker strings only change if the user is viewing that specific locale. The example below will only run apply the localization if the user has specified to view the Spanish version of the page (es).

/**
 * Conditionally apply the date picker locale strings, depending on what the 
 * current locale is as defined by WPML.
 *
 * @link https://wpforms.com/developers/localize-the-date-picker-strings/
 */

function wpf_dev_datepicker_apply_locale() {

    if ( defined( 'ICL_LANGUAGE_CODE' ) && 'es' == ICL_LANGUAGE_CODE ) {
    ?>

    <script type="text/javascript">

    jQuery( document ).ready( function() {

        jQuery( '.wpforms-datepicker-wrap' ).each( function() {
            var calendar = this._flatpickr;

            if ( 'object' === typeof calendar ) {
                calendar.set( 'locale', 'es' );
            }

        } );

    } );

    </script>

    <?php
    }

}

add_action( 'wpforms_wp_footer_end', 'wpf_dev_datepicker_apply_locale', 10 );

And that’s it! You’ve successfully localized the text for the Date Picker. Would you like to customize the Date / Time form field? Have a look at our tutorial on How to Customize the Date Time Field Date Options.

Reference Actions

• wp_enqueue_scripts
• wpforms_wp_footer_end

FAQ

Q: When I select the date, why doesn’t it show the correct format

A: When using this snippet, you’re only localizing the Month and Days in the date picker. If you wish to change the format of how the date appears, please check out this tutorial instead.