1. Home
  2. Snippets
  3. Localize date picker strings

Localize date picker strings

Heads up!

This article contains PHP, and javascript code and is intended for developers. We offer this code as a courtesy, but don't provide support for code customizations or 3rd party development.

Dismiss

The WPForms date picker is generated using the Flatpickr date script which builds the date picker using javascript. The library can be extended to localize the strings and translate them to non-English languages.

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.

The first step 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.
 *
 */
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' );

The second step is to apply the localization the the date pickers on the page, which is done via javascript.

/**
 * Apply the date picker locale strings.
 *
 */
function wpf_dev_datepicker_apply_locale() {
	?>
	<script type="text/javascript">
		Flatpickr.localize(Flatpickr.l10ns.ru);
		flatpickr('.wpforms-datepicker');
	</script>
	<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_datepicker_apply_locale', 30 );

Lastly, if you are leveraging the WPML plugin, then you 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.
 *
 */
function wpf_dev_datepicker_apply_locale() {
	if ( defined( 'ICL_LANGUAGE_CODE' ) && 'ru' == ICL_LANGUAGE_CODE ) {
	?>
	<script type="text/javascript">
		Flatpickr.localize(Flatpickr.l10ns.ru);
		flatpickr('.wpforms-datepicker');
	</script>
	<?php
	}
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_datepicker_apply_locale', 30 );
Updated on November 20, 2017

Was this article helpful?