[Resolved] Date Picker not Loading in Modal

[Author]

Posts

[Dave]

Tell us what you are trying to do?
Run a Cred form in an Elementor popup modal, which seems to be a lightbox modal.

Is there any documentation that you are following?
Not really, just load a Cred form into a popup via the Elementor widget.

Is there a similar example that we can see?
https://toolset.com/forums/topic/generic-field-datepicker-inside-a-modal-window/

What is the link to your site?
This form isn't visible without logging in.

I have a cred form that is just meant to edit a post type, and two of the fields are dates. If I use the form on a normal page it works fine, but I want it in a modal. So I've been using Elementor's popups for handle this functionality, and everything is fine except that the date pickers don't work. It knows they're clickable, but when you click, nothing appears and Toolset date fields don't allow for manual entry.

I've seen this issue complained about in various places including these forums, but there's not straight answer I can see. I've checked the z-index of the date picker, I've tried loading the bootstrap date picker and get the same result. I suspect it's to do with when the script is being called or enqueued, so I've tried forcing the bootstrap date picker to run using the cred_form_ready hook like this:

jQuery(document).on('cred_form_ready', function() {
      var date_input = jQuery('input[name="test"]');
      var container = jQuery('.bootstrap-iso form').length>0 ? jQuery('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'mm/dd/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
      };
      date_input.datepicker(options);
    })

but that doesn't work either. I know it's not setup properly but it just replaces the Toolset picker and doesn't apply to the other test fields but won't load on the form at all.

Here's the snippet of the form code for reference:

<div class="form-group">
    <div class="row">
      <div class="col-md-6">
        <label for="%%FORM_ID%%_event-start-date">[cred_i18n name='event-start-date-label']Start Date[/cred_i18n]</label>
        [cred_field field='event-start-date' force_type='field' class='form-control' output='bootstrap']
        [cred_generic_field type='textfield' field='test']
        {
        "required":0,
        "default":""
        }
        [/cred_generic_field]
         <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
      </div>
      <div class="col-md-6">
        <label for="%%FORM_ID%%_event-end-date">[cred_i18n name='event-end-date-label']End Date[/cred_i18n]</label>
        [cred_field field='event-end-date' force_type='field' class='form-control' output='bootstrap']
      </div>
    </div>
  </div>

As you can see, I've got three different Start Date fields there trying to find a way or getting the date picker to load, and it just will not.

So is there a way of enqueuing the Toolset datepicker so that it runs on the form in a modal window?

[Dave]

Quick update, I've found that running jQuery in an Elementor popup is a pain due to DOM loading, as suspected, and I've found this code:

jQuery(window).load(function() {
	jQuery.each( elementorFrontend.documentsManager.documents, ( id, document ) => {
		if ( document.getModal ) { // It's a popup document
			document.getModal().on( 'show', () => {
				/*Code goes here*/
			} );
		}
	});
});

Credit: hidden link

Add this after the window load to make it use $ in WordPress:

jQuery(document).ready(function($) { 

So all I need to know is the hook or function to load the date picker.

[Minesh]

Hello. Thank you for contacting the Toolset support.

There is no each method to initialize the date picker. You have to either target the date field IDs as you can see with the following reference ticket:
- https://toolset.com/forums/topic/this-field-is-required-error-but-field-is-filled-out/#post-1787331

You can check if the following workaround works for you:
- https://toolset.com/forums/topic/input-field-of-date-is-read-only/page/2/#post-1310491

[Dave]

Hi Minesh,

While I suspect the second suggestion might work, Elementor Popup's seem to work a bit differently to Bootstrap Modals, (and I can't get my head around how much code seems to be needed in that first example). So I gave up and scrapped the Elementor Popup and just used a HTML block with a button and modal in it to do the job. It's frustrating as the popups are easier to style and control the layout of, but if there's no direct way of resetting the execution order then working around it is way simpler than the mess of JS that appears to be needed, so I'll just close the ticket as I've got it working one way or another.

Thanks anyway.