PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Date Picker with Page Breaks

  1. I have restriction javascript code for the date picker in the header for two datepicker fields. It is working on the first page of a multiple page form only. But if i put the date fields on the second page OR if I hit previous to return to the first page and make revisions, the restriction code is not applied. Is there a way to force that code to apply every time that page loads? I need date fields in other sections of the form, not just the first.

    <script>
    	jQuery.noConflict();
    
    	jQuery(document).ready(function($) {
    	$( "#input_1_7" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    	});
    
    	jQuery(document).ready(function($) {
    	$( "#input_1_8" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    	});
    
    	jQuery(document).ready(function($) {
    	$( "#input_1_39" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    	});
    
    </script>
    Posted 11 years ago on Friday February 15, 2013 | Permalink
  2. The gform_post_render hook should do the trick for you.

    http://www.gravityhelp.com/documentation/page/Gform_post_render

    Posted 11 years ago on Friday February 15, 2013 | Permalink
  3. Thank you Rob, looking at it I thought that would work but so far it is not. Here is the code I'm using:

    <script type="text/javascript">
    
    	jQuery(document).bind('gform_post_render', function(){
    
    	jQuery( "#input_1_7" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    
    	jQuery( "#input_1_8" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    
    	jQuery( "#input_1_39" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    
    	});
    
    </script>

    Any thoughts on what I'm doing wrong?!

    Posted 11 years ago on Friday February 15, 2013 | Permalink
  4. NEVERMIND! I did not know I needed the destroy function in there but that did it and it works! Thank you for pointing me in the right direction!

    For others, here is my final code:

    <script type="text/javascript">
    
    	jQuery(document).bind('gform_post_render', function(){
    
    	// destroy default Gravity Form datepicker
            jQuery("#input_1_7").datepicker('destroy');
            jQuery("#input_1_8").datepicker('destroy');
            jQuery("#input_1_39").datepicker('destroy');
    
    	jQuery( "#input_1_7" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    
    	jQuery( "#input_1_8" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    
    	jQuery( "#input_1_39" ).datepicker({ minDate: '0', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true, beforeShowDay: function(date){ if (date.getDay() == 0){ return [false,''];  } else {  return [true, '']; }}  });
    
    	});
    
    </script>
    Posted 11 years ago on Friday February 15, 2013 | Permalink
  5. Right on, thanks for posting - glad you got it working!

    Posted 11 years ago on Friday February 15, 2013 | Permalink

This topic has been resolved and has been closed to new replies.