Wrong format in datepicker after click event in jquery on modal dialog

Question

I have a Panel with input date field by clicking will datepicker show up and by another click it will be hidden

                <div class="col-xs-3">
                    <input id="datepicker" wicket:id="issueDate" type="text" placeholder="TT.MM.JJJJ" style="width: 90px;">
                </div>
                <div class="col-md-1 showCalendar" onclick="openCalendar()">
                    <i class="p24 p24-inverse p24-inverse-bg p24-calendar icon"></i>
                </div>

the click event works in jquery like this:

      function openCalendar() {
        let $input = $('#datepicker');
        let datepicker = $input.datepicker().data('datepicker');
        if ($('.modal-dialog').length > 0) {
            let $modalInput = $('.modal-dialog').find('input').first();
            let modalDatePicker = $('.modal-dialog').find('#datepicker').first();
            $modalInput.datepicker({dateFormat: 'dd.mm.yy'}).data('datepicker').show();
        } else {
            datepicker.show();
            $input.focus();
        }
    }

The problem is that I'm using modal dialog with the same Panel but as soon as I'm trying to change date on the same input field in UI it shows date in the wrong format like this: 10/20/2020

But if I do the same on input date field which is not on modal dialog everything works fine with the right date format: 20.10.2020

I tried to set a date format in jquery '.datepicker({dateFormat: 'dd.mm.yy'})' but it didnt help

Answer 1

It seems you have two HTML elements with id datepicker.

 let $input = $('#datepicker');

and

 $('.modal-dialog').find('#datepicker')

This is invalid HTML and may lead to unexpected behavior. Be more creative and give them different names! ;-)