Datepicker translate does not work

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>

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.

@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.

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.

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.

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!