JQuery date picker translate in multi-language in PrestaShop 1.7

In this blog we are going to learn how to translate JQuery date picker in customer selected language.

We will show at product page.

So let’s understand how to achieve it:

Some time, we need to use JQuery datepicker at front-office then simply we include jQuery datepicker library and use jQuery datepicker function to show calendar, But by default calendar is open in english language.

Now we use jQuery i18n files to translate it because customer wants to see calendar in selected language not always english language.

We will include i18n js file from PrestaShop js directory and our custom js file from module using PrestaShop hook actionFrontControllerSetMedia.

public function hookActionFrontControllerSetMedia()
    {
        $controller = Tools::getValue('controller');
        if ('product' == $controller) {
            $this->context->controller->registerJavascript(
                'datepicker-i18n.js',
                'js/jquery/ui/i18n/jquery-ui-i18n.js'
            );
            $this->context->controller->registerJavascript(
                'module-show-date-js',
                'modules/'.$this->name.'/views/js/show_date.js'
            );
            $this->context->controller->addJqueryUI(array('ui.datepicker'));
        }
    }

After that, We will do code in our custom js file.

$(document).ready(function() {
    $(document).on("focus", "#wk_show_date", function() {
        var dlocale = prestashop.language.iso_code;
        if (typeof($.datepicker.regional[dlocale]) == 'undefined') {
            dlocale = '';
        }
        $("#wk_show_date").datepicker({
            showOtherMonths: true,
            dateFormat: 'dd-mm-yy',
            minDate: 0,
        });
        $.datepicker.setDefaults( $.datepicker.regional[dlocale] );
    });
});

In above code, we are getting language iso code from prestashop js object and set into dlocale variable.

If language is not present in datepicker regional array then set empty for default english language.

After that, initialise datepicker on filed using filed id and set datepicker regional language to translate calendar.

In this blog, we have shown at product page But you can show at any pages according to your requirement.

That’s all about this blog. Hope it will help you.

If you are facing any issues or doubts in the above process, please feel free to contact us through the comment section.

Also, you can explore our PrestaShop Development Services & a large range of quality PrestaShop Modules.

For any doubt contact us at support@webkul.com.