Magento2 – How to Use Frontend Calendar Localization

calendarjavascriptjquerylocalisationmagento2

I'm becoming crazy with the frontend translation of the mage/calendar widget in Magento 2.
Does somebody know how to localize it?

I have a calendar that's showing up on the front (from a bought module that has a specific class for the calendar) but I've not been able to display the months/day in French.
This specific frontend calendar is a very simple inheritance of the mage/calendar widget so I don't think that's a problem.

As the calendar widget is based on the jQuery UI calendar, I've tried to translate it as it is recommended in the jquery UI doc but it does not seem to work.

I've seen in the backend, on the product edit page, that there's a translated calendar for the date attributes 'set the product as new from' and it looks like the options of the knockout input are the following:

dateFormat:"dd/MM/y"
showsTime:true
storeLocale:"fr_FR"
timeFormat: "HH:mm"

But initializing my calendar with the following options on the front does not change anything, my calendar stay in English :

initCalendar: function() {
    $(this.element).calendar({
        dateFormat: this.options.calendarDateFormat,
        minDate: this.minDate.toDate(),
        setDate: 0,
        showOn: 'button',
        storeLocale: "fr_FR"
    });
},

I think I'm missing a little something but I don't know what and I have not been able to find any clear answer on the Internet… If anybody has already solved this issue, I would be really happy to read your answer

Thanks!

Best Answer

Well, I have no idea how to solve this for the kind of implementation of the calendar I have in this module but I replaced the calendar initialized with some data-mage-init and specific object by this simple implementation and it works fine...

Related Solutions

Magento 1 – How to Change Magento Calendar

I have used the spanish calender in magento

Try this codes

jQuery

jQuery(function($){
$.datepicker.regional['es'] = {
    closeText: 'Cerrar',
    prevText: '&#x3c;Ant',
    nextText: 'Sig&#x3e;',
    currentText: 'Hoy',
    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&eacute;rcoles','Jueves','Viernes','S&aacute;bado'],
    dayNamesShort: ['Dom','Lun','Mar','Mi&eacute;','Juv','Vie','S&aacute;b'],
    dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','S&aacute;'],
    weekHeader: 'Sm',
    dateFormat: 'dd/mm/yy',
    firstDay: 1,
    isRTL: false,
    yearRange:"1950:2050",
    changeYear:true,
    changeMonth:true,
    showMonthAfterYear: false,
    yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['es']);});

In Phtml page i have added this codes

<input type="text" value="01/01/1970"class="input-text validate-age-below-18"   id="datepicker"/></p>                                                                       jQuery(function() {
jQuery.datepicker.setDefaults( jQuery.datepicker.regional[ "" ] );
jQuery( "#datepicker" ).datepicker( jQuery.datepicker.regional[ "es" ] );

});

Hope it will work for you too

Magento – How to Extend and initialize a JS Widget with Proper Custom Namespace / Replace Existing Widget

I've answered the first part of your question in another question https://magento.stackexchange.com/a/96371/28167

The short answer is, using your example, "foobar.myCatalogAddToCart" is completely arbitrary.

All that matters is that it must match what get's returned. That text has no other meaning outside the scope of your widget and other widgets that extend your widget as you are doing with catalogAddToCart.

<script type="text/x-magento-init">
    "#product_addtocart_form": {
            "myCatalogAddToCart": { }
        }
    }
</script>

The only way this would work is if you create a requirejs-config mapping to your widget file. That would look like this

var config = {
    map: {
        '*': {
            "myCatalogAddToCart": 'Vendor_Module/js/path/to/widget'
        }
    }
};

"myCatalogAddToCart" could be any unique string so long as it is the same in your script tag and in the requirejs-config.js file.

Related Topic