Notice: ABPro's Stripe payment processor uses the Legacy Checkout and is not SCA compatible. read more..

How-To

Change Language on the Popup Caller

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:

<script src="/<?php echo JURI::base( true ); ?>/modules/mod_abp_booking/jquery.ui.datepicker-es.js"></script>

 

Now tell the datepicker to use language 'es'.

Around line 241 add:

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

 

That's it.