How to translate date/time picker?

Date and time picker is the part of the jQuery UI, which comes with the core of the WordPress. Therefore the .po/.mo translation of the theme does not work for the date/time picker.

You have to do some changes directly in the JavaScript code in order to translate date/time picker (creating a child theme is suggested at this point if you haven’t done so already).

In this article Daryl Lozupone described how to translate date and time picker. We’ll need just a part of the article.

First, open up a file assets/js/custom.js and around line 110 you will find this code:

$('.add-datepicker').datetimepicker({
 stepMinute: 5,
 hourMin: 6,
 hourMax: 21,
 dateFormat: HairpressJS.datetimepicker_date_format,
 //timeFormat: '',
});

According to the article, we should add some lines, so the code will look like this:

$('.add-datepicker').datetimepicker({
  stepMinute: 5,
  hourMin: 6,
  hourMax: 21,
  dateFormat: HairpressJS.datetimepicker_date_format,
  //timeFormat: '',
  closeText: 'Close',
  currentText: 'Today',
  monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
  monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
  dayNamesMin: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],
  dateFormat: 'dd/mm/yy',
  firstDay: 0,
  isRTL: false
});

Now all that is left to do is that you translate the text in the lines we added, ie. month names, day names, etc.

If the instructions and the code above don’t work, please open a new support ticket.

If you are unfamiliar with the code, we offer customization as well. Contact us for the details and a free quote.