在模式对话框 jquery 中单击事件后日期选择器中的格式错误

Question

我有一个带有输入日期字段的面板，单击它会显示日期选择器，再单击一次它将被隐藏

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

单击事件在 jquery 中的工作方式如下：

      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();
        }
    }

问题是我在同一个面板上使用模态对话框，但是当我试图在 UI 中的同一个输入字段上更改日期时，它以错误的格式显示日期，如下所示: 10/20/2020

但是，如果我在不在模态对话框中的输入日期字段上执行相同操作，则一切正常且日期格式正确：20.10.2020

我试图在 jquery '.datepicker({dateFormat: 'dd.mm.yy'})' 中设置日期格式，但它没有帮助

Answer 1

您似乎有两个 HTML 元素，id 为 datepicker。

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

和

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

这是无效的 HTML，可能会导致意外行为。更有创意，给他们不同的名字！ ;-)

在模式对话框 jquery 中单击事件后日期选择器中的格式错误

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

javascript

jquery

wicket

bootstrap-4