Change Language on the Popup Caller

Posted in How-To

The ABPro Popup Caller module uses a JQuery datepicker.

To have it display in a language other than English you need to load a language file and modify the code to set the language.

The API documentation for the datepicker is here: http://api.jqueryui.com/datepicker/

The language files are here:
https://github.com/jquery/jquery-ui/tree/master/ui/i18n

Step 1

Get a language file.

Because we are running JQuery under Joomla, the language files need to be modified.

Example

Spanish file is:

/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* Traducido por Vester (This email address is being protected from spambots. You need JavaScript enabled to view it.). */
(function($) {
$.ui.datepicker.regional['es'] = {
renderer: $.ui.datepicker.defaultRenderer,
  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
    'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
    'Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    dateFormat: 'dd/mm/yyyy',
    firstDay: 1,
    prevText: '<Ant', prevStatus: '',
    prevJumpText: '<<', prevJumpStatus: '',
    nextText: 'Sig>', nextStatus: '',
    nextJumpText: '>>', nextJumpStatus: '',
    currentText: 'Hoy', currentStatus: '',
    todayText: 'Hoy', todayStatus: '',
    clearText: '-', clearStatus: '',
    closeText: 'Cerrar', closeStatus: '',
    yearStatus: '', monthStatus: '',
    weekText: 'Sm', weekStatus: '',
    dayStatus: 'DD d MM',
    defaultStatus: '',
    isRTL: false
  };
$.extend($.ui.datepicker.defaults, $.ui.datepicker.regional['es']);
})(jQuery);

To make it work under Joomla you need to change the $ to jQuery and remove the .ui

The file becomes:

/* Inicialización en español para la extensión 'UI date picker' para jQuery. */
/* Traducido por Vester (This email address is being protected from spambots. You need JavaScript enabled to view it.). */
(function(jQuery) {
jQuery.datepicker.regional['es'] = {
renderer: $.ui.datepicker.defaultRenderer,
      monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
    'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
    monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
    'Jul','Ago','Sep','Oct','Nov','Dic'],
    dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
    dayNamesShort: ['Dom','Lun','Mar','Mié','Juv','Vie','Sáb'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sá'],
    dateFormat: 'dd/mm/yyyy',
    firstDay: 1,
    prevText: '<Ant', prevStatus: '',
    prevJumpText: '<<', prevJumpStatus: '',
    nextText: 'Sig>', nextStatus: '',
    nextJumpText: '>>', nextJumpStatus: '',
    currentText: 'Hoy', currentStatus: '',
    todayText: 'Hoy', todayStatus: '',
    clearText: '-', clearStatus: '',
    closeText: 'Cerrar', closeStatus: '',
    yearStatus: '', monthStatus: '',
    weekText: 'Sm', weekStatus: '',
    dayStatus: 'DD d MM',
    defaultStatus: '',
    isRTL: false
  };
jQuery.extend(jQuery.datepicker.defaults, jQuery.datepicker.regional['es']);
})(jQuery);

Now save the file with the name jquery.ui.datepicker-es.js and upload it to the folder with the ABPro Popup Caller module..

\modules\mod_abp_booking

Step 2

Make the datepicker use the new language file.

Edit file: \modules\mod_abp_booking\default.php

Around line 161 a call to load your new language file:

Now tell the datepicker to use language 'es'.

Around line 241 add:

jQuery( "#datepicker" ).datepicker( "option", jQuery.datepicker.regional[ "es" ] );

That's it.