Can't display on front-end more than one field group with date picker field

• Marcella

• April 15, 2014 at 12:50 am

Hello to everybody,
a day and a sleepless night trying to figure out why the front-end displays only the date picker field of the first “field_groups”. All fields of the other “field_groups” loaded on the same page are properly saved and displayed with the exception of the date picker fields type.
I noticed that some classes and the id are not assigned to these. That is: the code of a working date field picker is typically similar to:
<input type="text" value="" class="input active hasDatepicker" id="dp1397430542535">
As in all the other date fields loaded after first “field_groups” code is:
<input type="text" value="" class="input">
Each field and “field_groups” have unique id and slug.
The strange thing is that in the edit page on the back-end everything is working correctly.

This is the code used in the template page:

<!-- ACF CUSTOM FORM —>
global $post;
  $var_page_id = $post->ID;
          <?php
acf_form(array(
	'post_id' => $var_page_id,
    'field_groups' => array('191'),
	'form' => true, 
	'form_attributes' => array( 
            'id' => 'form_setup',
            'class' => 'form_render ',
        ),
    'submit_value' => 'Salva dati',
	'return' => get_permalink( $var_page_id ),
    'updated_message' => 'Dati correttamente salvati.', 
));
?>
          <h3>This is the value retrieved with "the_field" for the first date picker: <em><?php the_field('first_data', $var_page_id); ?></em></h3>
<hr />
<?php
acf_form(array(
	'post_id' => $var_page_id, 
    'field_groups' => array('198'),
	'form' => true, 
	'form_attributes' => array( 
            'id' => 'form_setup',
            'class' => 'form_render ',
        ),
    'submit_value' => 'Salva dati',
	'return' => get_permalink( $var_page_id ),
    'updated_message' => 'Dati correttamente salvati.',
));
?>
<h3>This is the value retrieved with "the_field" for the second date picker:<em> <?php the_field('second_data', $var_page_id); ?></em></h3>
          <!-- end ACF CUSTOM FORM -->

I am enormously grateful to anyone who can give me a little help!
🙂 Marcella

• mickfilipe

• May 16, 2014 at 9:14 am

Hi Marcella,

I’m having the same problem with a repeated form (one instance for adding posts another for editing)

The date picker on the 2nd form is not working. From having a look at the example on your website you seem to have fixed it.

I would really appreciate it if you could explain how you fixed it.

Thanks

Carlos

• Marcella

• May 17, 2014 at 6:20 am

Hello Carlos! It took me a long time because I’m not an expert in code but, yes, I solved it. I don’t know if the solution I’ve found is the best, since I have modified some plugin source files that will be overwritten when updating, but for now it works!
I’m glad to show you how I did it hoping that you find it useful.

The problem is that the acf_form function surrounds the acf form with a <div id=“poststuff”> wrapper, and calling it twice will create two wrappers with this same id, and confuse the javascript.
Maybe if you remove the addition of this wrapper from the acf_form() code, then wrap the fields manually it may work, but in my case I have too many forms in the same page and this solution would be impossible for me…. So here what I have done:

– advanced-custom-fields / core / api.php
LINE 1251 : <! - <div Id="poststuff"> ->
LINE 1269 : enter here the div above together with the variable that stored the id of “group_fields” + class to use with the css styles:
echo ' <div id="poststuff_' . $acf['id'] . '" class="stuffclass"> ' ;

– advanced-custom-fields / js / input.js
LINE 917 : change the absolute reference to the div “#poststuff” with the selector “all divs that start with “poststuff_”:
$(document).trigger('acf/setup_fields', [ $("[id^='poststuff_']") ]);

– advanced-custom-fields / js / input.min.js
generated the new compressed code

– advanced-custom-fields / css / input.css
ROW 16 : Replaced reference id “#poststuff ” with reference class “.stuffclass”

	.acf_postbox .inside,
	.stuffclass .acf_postbox .inside {
	margin: 0;
	padding: 0;
	}

That’s all!
If someone has a better solution or any further suggestions these would be well-accepted! 😉

• mickfilipe

• May 20, 2014 at 9:08 am

Hey Marcella, thank you very much for this!

Your solution worked for me too and ACF probably needs to be fixed according to your code.

Hopefully an admin/author will see this post and flag it.

Thanks again and best of luck with your website! x