Date Picker not working on pop up modal

Hi there, @briankassler,

Can you tell us more about that? Do you use a site builder or a plugin that handles forms – like popups etc? If so, can you confirm that erroring functionality works well when these are turned off??

Can you share a URL where the issue happens? If not, you can share screenshots if that helps. You can create screenshots using something like Snipboard or Imgur and post the link here.

The functionality works fine when the form is not placed in a popup. I am using Elementor and Elementor Pop Ups but have tried using other popup plugins with the same outcome. At the moment I only have screenshots, but I will see if I can get a link for you.

Thanks

https://imgur.com/oIHqNxZ

https://i.imgur.com/bnGoKmU

I wonder if it could be a z-index issue, @briankassler, where the date picker is opening behind the modal. If you are using the default WP Job Manager date picker, this custom CSS should fix the issue if it because the date picker has a lower z-index value than the modal:

/* Increases WPJM date picker z-index value for modal */

#ui-datepicker-div {
	z-index: 99999 !important;
}

Paste the custom CSS above into Appearance > Customize > Additional CSS via your WordPress admin panel, and then hit “Publish” to see if it fixes the issue (if it doesn’t, just remember to go back and delete it, so it doesn’t impact something on your site in the future).

Hi @erania-pinnera @hastibe,
I have tried changing the z-index to no avail. I had another look and the elements that hold the datepicker are not present when the form is in a modal, it may be because the scripts for the datepicker need to be reinitialised when the modal is opened. Here are screenshots showing this:

Form in modal, no datepicker elements:

https://i.imgur.com/XdqGKoe.png

Form on page, with datepicker elements:

https://i.imgur.com/EpNgHKq.png

• This reply was modified 1 year, 3 months ago by briankassler.

I have managed to get the date picker showing in the modal by adding this javascript to the page:

This attaches the datepicker scripts to the date input after the modal is opened:

jQuery(document).ready(function($) {
$(‘.openModalButton’).on(‘click’, function() {
// Wait a moment for the modal content to fully load
setTimeout(function() {
$(‘.input-date’).removeClass(‘hasDatepicker’).datepicker();
}, 100);
});
});

But when you click on a date it closes the modal due to the click event bubbling up through its ancestors, so this code stops it from bubbling up:

$(document).on(‘click’, ‘.ui-datepicker’, function(event) {
event.stopPropagation();
});

• This reply was modified 1 year, 3 months ago by briankassler.
• This reply was modified 1 year, 3 months ago by briankassler.