How to Modify Date Field Date Picker Strings

Overview

Do you need to modify the Date field date picker text for Months (long and short)? Perhaps you’d like to show a different language in your date picker. This tutorial will show you how to change this text using PHP.

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.

This is how the date field date picker looks by default

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

Setup

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.

You’ll need to copy the code below and add it to your site.

/**
 * Translate strings for WPForms date picker and modify first day of week.
 *
 * @link https://wpforms.com/developers/modify-date-field-date-picker-strings/
 *
 */
function wpf_dev_datepicker_strings() {
	?>
	<script type="text/javascript">
	window.wpforms_datepicker = {
        disableMobile: true,
	 	locale: {
	    	firstDayOfWeek: 1,
	    	weekdays: {
	      		shorthand: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
        		longhand: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi']
	    	}, 
		    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', 'wpf_dev_datepicker_strings' );

Now when you view your Date Picker dropdown, you’ll see the changes instantly.

This is how the date picker now looks since we've changed our language

And that’s it! You’ve successfully updated the string for the Date Picker months. Would you like to further customize the Date / Time field? Take a look at our article on How to Customize the Date Time Field Date Options.

Action Reference: wpforms_wp_footer