1. Home
  2. Snippets
  3. Modify Date Picker strings

Modify Date Picker strings

Heads up!

This article contains PHPand 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. By default, the Date Picker calendar strings are in English and the first day of the calendar week will be Sunday.

Default Date Picker settings in WPForms

If you’d like to localize the language strings used in the Date Picker, we have a separate tutorial with more details.

By adjusting the code below, you can modify or translate the strings used for days and months in the calendar, as well as adjust the first day of the week.

In this example, we’ve translated the days and months into French and also changed the first day of the week to Monday.

/**
 * Translate strings for WPForms date picker and modify first day of week.
 */
function wpf_dev_datepicker_strings() {
	?>
	<script type="text/javascript">
	var Flatpickr = Flatpickr||{l10n: {}};
	Flatpickr.l10ns.default.firstDayOfWeek = 1; // Set first day of week (0=Sunday, 1=Monday, etc)
	// Modify strings used for days of week.
	Flatpickr.l10ns.default.weekdays = {
		shorthand: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
		longhand: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
	};
	// Modify strings used for months.
	Flatpickr.l10ns.default.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', 'wpf_dev_datepicker_strings' );

Modified Date Picker settings in WPForms

Updated on January 19, 2018

Was this article helpful?