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 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 both the first and second code snippets to your site. Then you can customize it for your language.
If you need help in adding snippets to your site, please see this tutorial.
1) Load the date picker locale
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 Spanish 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/[email protected]/dist/l10n/es.js',
array( 'wpforms-flatpickr' ),
null,
true
);
}
add_action( 'wp_enqueue_scripts', 'wpf_dev_datepicker_locale', 10 );
2) 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.
Related
Action References:
