datepicker in modaldialog remains on close of dialog

[Jack Bakker, modificado hace 6 años.]

I have a datepicker which shows onclick of an input field which is in a form which is in a modal dialog. On selecting a date, the input field gets populated with the date. So far so good.

However, if I open the dialog, onclick to show the datepicker, then close the dialog, the calendar is still there. Also, on scrolling, the calendar doesn't move with the contents of the modal but moves with the underlying grayed out main view.

Ideas ?

<aui:input cssclass="p-locationintakeform-form2-input-field" label="preferred.date" name="bookPreferredDateModal" showrequiredlabel="" value="${bookPreferredDate}">
                    </aui:input>

    AUI().use('aui-datepicker',function(A) {
        var bookPreferredDateModalPicker;
        var bookPreferredDateModalInput = A.one('#<portlet:namespace />bookPreferredDateModal');

        bookPreferredDateModalPicker = new A.DatePicker({
            trigger: '#<portlet:namespace />bookPreferredDateModal',
            mask : '%Y-%m-%d',
            popover: {
                zIndex: 99999
            },
            calendar: {
                setValue : true,
                //minDate : new Date(),
                //maxDate : '09/05/2100',
                selectMultipleDates : false,
                on: {
                    dateClick: function(event) {
                        bookPreferredDateModalInput.set('value', A.Date.format(event.date,{ format:bookPreferredDateModalPicker.get('mask') }) );
                    }
                }
            },
        });
    });

[Byran Zaugg, modificado hace 6 años.]

The datepicker's origin is based off the input that opened it, but it's absolutely positioned to the page, not the input. So if your dialog content wasn't an iframe, I could see why it would scroll with the page, not the dialog contents.

As for closing the datepicker with the dialog, you may need to manually fire a close/hide(?) event on the datepicker on/after the dialog's close event.

[Jack Bakker, modificado hace 6 años.]

Thanks Bryan. Confirming is not an iframe. Am now thinking on closing datepicker on scroll and also close datepicker on closing dialog.

[Jack Bakker, modificado hace 6 años.]

after getting some help on the slack 'alloyui' channel , the below now close a datepicker and/or a timepicker if the window was scrolled.

AUI().use('node', function(A) {
            A.on('scroll', function(event){
                if(window.bookPreferredDateModalPicker){
                    window.bookPreferredDateModalPicker.hide();
                }
                if(window.bookPreferredTimeModalPicker){
                    window.bookPreferredTimeModalPicker.hide();
                }
            });
        });

As for hiding the datepicker and/or timepicker on close (top-right x) of the dialog, such works after the first time opening a modal dialog, but not after opening the modal dialog the second time. It would appear that destroyOnHide: true is not actually destroying the window on hide? Or perhaps I don't understand what 'destroy' means in this use case. On first click of a button, console.log(bookModal) outputs null as expected, but on second time, console.log(bookModal) shows the component.

AUI().use('aui-base','aui-io-plugin-deprecated','liferay-util-window', function(A) {

var bookModal = null;
A.one('#<portlet:namespace />book-next-button-toModal').on('click', function(event){
                console.log(bookModal);
               
                var uri = '&lt;%=renderURL.toString()%&gt;';

                bookModal=Liferay.Util.Window.getWindow(
                {
                    dialog: {
                        centered: true,
                        constrain2view: true,
                        cssClass: 'book-dialog',
                        modal: true,
                        resizable: false,
                        width: 1000,
                        height: 800,
                        destroyOnHide: true,
                        after: {
                            destroy: function(event){
                                console.log("destroy...");
                                
                                if(window.bookPreferredDateModalPicker){
                                    window.bookPreferredDateModalPicker.hide();
                                }
                                if(window.bookPreferredTimeModalPicker){
                                    window.bookPreferredTimeModalPicker.hide();
                                }
                            }
                        },
                    }
                }
                ).plug(A.Plugin.IO,
                {
                    autoLoad: false
                });
                bookModal.show();
                bookModal.titleNode.html("<liferay-ui:message key="finish.booking.your.appointment" />");
                bookModal.io.set('uri',uri);
                bookModal.io.start();

            });