How to Localize the Date Picker Strings

Overview

Would you like to localize the Date Picker strings in WPForms? The library can be extended to localize these strings and translate them into non-English languages. This tutorial will show you the basics of localizing the Date Picker strings using PHP and JavaScript.

The WPForms Date Picker is generated using the Flatpickr date script which builds the date picker using javascript.

Flatpickr has over 25 languages available, so most languages are readily available to use. All available languages can be viewed and/or downloaded on the project GitHub repository.

Setup

Just add this code to your site and then customize it for your language.

1) Load the date picker local

The first step to localize the Date Picker is to load the locale file on your website. You can download the locale from GitHub, upload it to your website, and enqueue the file. In the example below, we are loading a Russian locale directly from a CDN.

/**
 * Load the date picker locale strings.
 *
 * @link https://wpforms.com/developers/localize-the-date-picker-strings/
 *
 */
function wpf_dev_datepicker_locale() {
	
	wp_enqueue_script( 
		'wpforms-datepicker-locale', 
		'https://npmcdn.com/flatpickr@2.2.4/dist/l10n/ru.js', 
		array( 'wpforms-flatpickr' ), 
		null, 
		true
	);
}
add_action( 'wp_enqueue_scripts', 'wpf_dev_datepicker_locale' );

2) Apply the localization

The second step is to apply the localization of the date pickers on 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(){
		flatpickr.localize(Flatpickr.l10ns.ru);
		flatpickr('.wpforms-datepicker');
     });
	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_datepicker_apply_locale', 30 );

3) Add conditional logic

Lastly, if you are leveraging 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 Russian version of the page (ru).

/**
 * 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' ) && 'ru' == ICL_LANGUAGE_CODE ) {
	?>
	<script type="text/javascript">
    jQuery(document).ready(function(){
		flatpickr.localize(Flatpickr.l10ns.ru);
		flatpickr('.wpforms-datepicker');
    });
	</script>
	<?php
	}
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_datepicker_apply_locale', 30 );

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.