Forums

Hi there!
​
I'm having problems right now. What I'm trying to do is to add calendar/datepicker fiield to my form, which opens in modal window. I installed your modal demo, removed all other fields and just added calendar field on normal screen and one same calendar field on modal.
Calendar on non-modal works just as intended:

But the one in modal behaves strange - when clicked inside field, nothing happens:

​
when clicked on label - opens datepicker over other calendar (which is behind overaly):

​
Then I removed calendar from normal screen, and left only one in whole form - in modal popup. It stopped working completely. nothing opens whichever part of form I click. Simply no datepicker appears.
​
I attached backup of my test form.
​
​[file=10891]Modal_with_datepicker_24_Aug_2018_22_05_52.cf6bak[/file]
​
I don't need two calendars. I only need one to work correctly in modal popup. Any ideas how to fix this?
​
Thanks in advance!

Hi there! any chances to solve this matter?

Does it not appear, or is it behind the modal window.

As I described - when there are two instances, works the instance which is NOT in modal. When only modal's instance is left - it doesn't appear at all.

This is just a start because I have to go but it should help you out.
​
FIRST
Rename your second calendar, so it doesn't have the same name as the first one.
​
SECOND
Put this in a dom-ready custom JS block in your FIRST form (as in not the modal one)

jQuery('.ui.modal').modal({ onVisible: function() {jQuery("#calendar2").calendar(); } });

You'll need to do some tweaking but it should get your started.

I'm not going to use two forms, only ONE. so the calendar will be one (in modal window). How to make it appear?

I meant "section". So under the designer tab, you have "one" and "two".

Ok, the code you provided does the job, but here are some details for those who may look for the solution:
​
1 - the code must be in same section where calendar is (i.e. modal). and
​
2 - the name "#calendar2" in part of provided code must be the same as your calendar element has:
​

​
Just in case I attached working form as well, good luck for everyone having to fix same bug![file=10942]Modal_with_datepicker_TEST_04_Sep_2018_00_30_14.cf6bak[/file]
​
Thank you!

The next update should solve the issue of the calendar not loading in the modal, usually the problem is that the modal moves the dom content and that breaks the calendar!
​
Best regards

Hi! Actually recent updates brake this solution. I'll try to create new form from ground up without this JS hack, but I'm not sure if it's going to work

sett he modal to not move the content in the dom

After update I cannot find this setting anywhere. Actually it seems that some updates are just brake old forms. I cannot understand even why CF interface look different looking at my old form and new demo form. I can't see advanced settings to set app type to "custom" to make modal work as intended. And again can't upload screenshots, so here is my old form:
https://www.dropbox.com/s/hhnmt0vl3egfbf9/old-form.jpg?dl=0
​
and here is new demo:
https://www.dropbox.com/s/8uae9d7ckpb82fh/new-demo.jpg?dl=0
​
The difference is definitely there.

two problems seems to be related, here is another forum topic: https://www.chronoengine.com/forums/posts/t107006/p388727#p388727