Datepicker translate does not work


Topic: Datepicker translate does not work

Stig Kølbæk pro premium priority asked 3 years ago

I am trying to make a toggled datepicker with a traslation, but the behavior is that the datepickerdoes not translate, it stays in English and not Danish, and it trhougs an error in console.

The Error

mdb.min.js:316 Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
    at i.value (mdb.min.js:316)
    at new i (mdb.min.js:316)
    at mdb.min.js:316
    at Array.forEach (<anonymous>)
    at Module.n (mdb.min.js:316)
    at r (mdb.min.js:316)
    at mdb.min.js:316
    at mdb.min.js:19
    at mdb.min.js:19

HTML

<div class="form-outline mb-4 datepicker datepicker-translate" data-mdb-format="yyyy-mm-dd"  data-mdb-toggle-button="false">
    <input type="text" id="birthdate" data-mdb-toggle="datepicker" class="form-control" value ="<%=objGetUserInfo("DateOfBirth")%>" disabled />
    <label class="form-label" for="birthdate">Fødselsdato</label>
    <button class="datepicker-toggle-button" data-mdb-toggle="datepicker">
        <i class="fa-duotone fa-calendar-days datepicker-toggle-icon" style="--fa-primary-color: black; --fa-secondary-color: blue;"></i>
    </button>            
</div>

JS (Loaded at bottom after MDB JS)

const datepickerTranslated = document.querySelector('.datepicker-translated');
    new mdb.Datepicker(datepickerTranslated, {
    title: 'Vælg fødselsdato',
    monthsFull: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'],
    monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov','Dec'],
    weekdaysFull: ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'],
    weekdaysShort: ['Søn', 'Man', 'Tir', 'Ons', 'Tor', 'Fre', 'Lør'],
    weekdaysNarrow: ['S', 'M', 'T', 'O', 'T', 'F', 'L'],
    okBtnText: 'Ok',
    clearBtnText: 'Annuller',
    cancelBtnText: 'Luk',
    });

What could be the cause to this?


UNNdev pro premium priority commented 3 years ago

Use only your datepicker-translate class and not datepicker. Otherwise, MDB will already initialize the Datepicker instance with the default translation.


Stig Kølbæk pro premium priority answered 3 years ago

Hi @UNNdev

If I do that my data-mdb-toggle will not work, and I still get the error in the console.

Updated HTML

    <div class="form-outline mb-4 datepicker-translated" 
         data-mdb-format="yyyy-mm-dd" 
         data-mdb-toggle-button="false">
        <input type="text" id="birthdate"  data-mdb-toggle="datepicker-translated" class="form-control" value ="<%=objGetUserInfo("DateOfBirth")%>" disabled />
        <label class="form-label" for="birthdate">Fødselsdato</label>
        <button class="datepicker-toggle-button" data-mdb-toggle="datepicker-translated">
            <i class="fa-duotone fa-calendar-days datepicker-toggle-icon" style="--fa-primary-color: black; --fa-secondary-color: blue;"></i>
        </button>            
    </div>

UNNdev pro premium priority answered 3 years ago

Have a look here: https://mdbootstrap.com/snippets/standard/kayem79/3446160

I don't know where you have that data-mdb-toggle="datepicker" or data-mdb-toggle="datepicker-translated" from or data-mdb-toggle-button="false". Can't find anything like it in the documentation.

Also, you cannot use disabled on the input, as that will render the MDB datepicker useless. readonly doesn't work either. It's something I suggested a while ago to prevent arbitrary input.


Stig Kølbæk pro premium priority answered 3 years ago

@UNNdev .. 'If you look at https://mdbootstrap.com/docs/standard/forms/datepicker/ and go to the Input toggle section and look in the HTML you will see both data-mdb-toggle-button="false" and data-mdb-toggle="datepicker"

Regarding the disabled I am removing that with $(this).parents('tr').find('input').prop('disabled', function(i, v) { return !v; }); using a button to let the user unlock the field, so the disabled will not be present in the dom when I need to execute the data-mdb-toggle="datepicker" .. so with the documentation linked before and the property of disabled gone this should work.'

I have tried to work with API as discribed in the above link aswell setting the data attributes, which actually work using i.e. data-cancel-btn-text="Annuller", data-clear-btn-text="Nulstil" and data-switch-to-day-view-label="Vælg fødselsdato" but when it comes to using it together with the months array, i.e data-months-short="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']" it is not able to translate that way around, so I will not be able to use the data attributes fully unfortunately, since that will make it all work without the JS.


UNNdev pro premium priority answered 3 years ago

Ah, my bad, I only looked at the API part as I thought it would cover everything. I updated my example above. The icon button is invisible in my example, though, because the Font Awesome Pro CSS is not loaded. While you should only use your datepicker-translated class on the div and not datepicker to prevent MDB from initializing it with default settings, the data-mdb-toggle has to be datepicker and not datepicker-localized. If I swap the fa-duotone fa-calendar-days with far fa-calendar in the example, the icon appears and everything works as expected.


Stig Kølbæk pro premium priority answered 3 years ago

If I take your example in the snippet (https://mdbootstrap.com/snippets/standard/kayem79/3446160) (both in the snippet and in my code) it does not trigger the data-mdb-toggle eigther on the button nor on the input it self .. the input simply just gets focus, and the button reloads the page, and I still have the error in the console.


Stig Kølbæk pro premium priority answered 3 years ago

It turns out you where spot on in your last code snippet execpt that it was missing data-mdb-toggle="datepicker" in the input .. everyting works just like it should now! :-) .. Thank you @UNNdev!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.9.0
  • Device: HP
  • Browser: Chrome
  • OS: Win 11
  • Provided sample code: No
  • Provided link: No