Forums

I'm using Chronoforms on

This is private content

and as you go through the form, you'll be able to select the date with the calendar pop up on the first 'Select A Date' box. But if you click on the 'Add Another Student' button and click inside the 'Select A Date' box, the calendar will not appear. The 'Add Another Student' was created inside the Chronoforms Multiplier.
[attachment=0]select-a-date.PNG[/attachment]
[attachment=1]date-settings.PNG[/attachment]

I'm suspecting it's a bug because the first one works outside of the Multiplier, but not inside it.

Any fix for this?

Hi toad,

As far as I can see the multiplier is creating the new elements with exactly the same name and id so you won't get valid data submitted - only the last one.

There may also be a problem that the datepicker is attached when the page loads - at which point the duplicate elements don't exist. You'd have to add custom code to run when the Add button is clicked and attach the datepicker to the new DOB input then.

Bob

As far as I can see the multiplier is creating the new elements with exactly the same name and id so you won't get valid data submitted - only the last one.

When I ran tests using the multiplier with different data, I was able to get the data as entered. So I'm not sure what you mean by by data won't be valid but the last one. If you're referring to if someone enters in the incorrect captcha and then form refreshes, then, yes, the additional student data is gone (which is not normal and is a separate issue).

...You'd have to add custom code to run when the Add button is clicked and attach the datepicker to the new DOB input then.

I'm confused. I'm not using the Date Selector in the Multiplier for a DOB. What's more, I don't understand what I need to 'add custom code' for.

You'd have to add custom code to run when the Add button is clicked and attach the datepicker to the new DOB input then.

Bob

I don't understand, then, how to add custom code to make the datepicker (Start Date, End Date) work for additional entries in the multiplier. I've been working

This is private content

for days and still do not understand how the datepicker is not working how to get it to work. What code is needed to make this work?

Thank you.

Hi toad,

As far as I can see the multiplier is creating the new elements with exactly the same name and id so you won't get valid data submitted - only the last one.

There may also be a problem that the datepicker is attached when the page loads - at which point the duplicate elements don't exist. You'd have to add custom code to run when the Add button is clicked and attach the datepicker to the new DOB input then.

Bob

Getting back to this subject, I'm still struggling to get the datepicker inside a multiplier to pop up the calendar. There's an obvious conflict somewhere that is causing the pop up not to appear inside the multiplier, but yet it appears outside of it. I've replaced the 'datepicker' inputs from Chronoforms and replaced them with textboxes with the class 'datepicks' and using this code in the page template:

  <script>
  $(function() {
    $( ".datepicks" ).datepicker();
  });
  </script>

Refreshing the page gives no calendar pop up...at all. Loading Chrome's Developer Tools > Console displays no errors. Therefore, I'm unsure as to why the code is not working.

So I decided to add just one Chronoforms Datepicker inside the Multiplier (no class name, to prevent conflicts). Same result. No calendar pop up. But if I was to add the Chronofroms Datepicker OUTSIDE of the Multiplier, then that one datepicker works fine, but still no response with the secondary date picker inside the Multiplier using the '.datepicker()' function.

So now I'm trying to still adapt another datepicker to the multiplier, I have this in the head:

  	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Which loads the datepicker script.

I'm trying to get this:

    <script>
		jQuery('body').on('focus', '.datepicks', function() {
			jQuery(this).datepicker();
		});
	</script>

to work so I wouldn't have to load a separate code when the 'Add' button is clicked, but to get the body tag to 'listen' for the .datepicks function on focus. But I'm not getting a response.

It would be nice to get through this.

If anyone else ever comes across this issue,
Use this datepicker. Apply this code before the </body> tag:

 <script>
  jQuery('body').on('focus', '.datepicks', function() {
   jQuery(this).datepicker();
  });
 </script>

[list]Make sure you have the UI code loading in your <head> tag.
For the sake of styling conflicts, download the ui stylesheet. You can override much of the CSS to customize your calendar.
Add a class to your textboxes (do not use the Chronoforms datepicker).[/list]

You should then see your datepickers appear in the multiplier. This can work on one form that has both datepickers inside at outside of the Multiplier.

hi...

I came along the same problem and found a soltuion, using chronoforms datepicker in the multiplier content.

Replacer: __N__ (because '##' causes jquery selector error)
Multiplier Content Container Class: multiplier-content__N__

Designer structure: see Screenshot_1.jpg

custom Code after the Datepicker Box in the multiplier content:

if(jQuery(".multiplier-content__N__ input[data-fieldtype='gdatetimepicker']").length > 0){
    jQuery(".multiplier-content__N__ input[data-fieldtype='gdatetimepicker']").gdatetimepicker();
}

kind regards
Matthias