Help getting datepicker minDate working in WordPress

Gravity Support Forums » Plugin Support » Gravity Forms

redkite
Member
I've looked at a number of other posts but still can't get this to work. The date picker is on the second page of this form:

http://www.redkitecreative.com/projects/ace/schedule-an-appointment/

This is the script I have in <head>:
```
<script type="text/javascript">
jQuery.noConflict();
  jQuery(document).ready(function($) {
		$( "#input_2_35" ).datepicker({ minDate: '+2d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
  });
</script>
```
I'm not a programmer, can someone help me fix this?
Posted 12 years ago on Saturday August 4, 2012 | Permalink
Chris Hajer
Key Master

What are you trying to set as the minimum date? 2 days in the future as the first selectable date?

Nice job on the form and functionality, BTW.

Posted 12 years ago on Saturday August 4, 2012 | Permalink
redkite
Member

Yes, I'm trying to set it so the earliest possible date is two days in the future.

Thanks! :)

Posted 12 years ago on Saturday August 4, 2012 | Permalink
Chris Hajer
Key Master

Got it. Let me look into that and see what's going on. Thanks for the clarification.

Posted 12 years ago on Saturday August 4, 2012 | Permalink
redkite
Member

Hi, can someone get back to me on this issue? The site's pretty close to launch time. Thanks!

Posted 12 years ago on Tuesday August 7, 2012 | Permalink
Chris Hajer
Key Master

Please try changing the '+2d' to +2 without quotes and without "d". That worked for me. Please let us know if that works for you.

Posted 12 years ago on Wednesday August 8, 2012 | Permalink
redkite
Member

Now I have this, but it's still letting me pick any date:

minDate: +2

I tried it without the d both with and without quotes, still the same :(

Posted 12 years ago on Wednesday August 8, 2012 | Permalink
Chris Hajer
Key Master

I'm not sure why that's not working for you: it did work for me. This functionality is from the jQuery UI Date Picker - it's nothing we have control over. Can you check with their support and see if there is something we have overlooked?

http://forum.jquery.com/using-jquery-ui

Thank you.

Posted 12 years ago on Thursday August 9, 2012 | Permalink
redkite
Member

This is the answer I got from the jQuery UI forum, but I have no idea what it means or how to apply it:

"It looks like your page is reloaded between the first and second parts of the form. The first time the datepicker is initialised with minDate (but isn't shown). The second time the datepicker is initialised via the gformInitDatepicker function which doesn't have any minDate set."

Posted 12 years ago on Friday August 10, 2012 | Permalink
Chris Hajer
Key Master
OK, that makes sense. I'm glad they were able to help. You can add that JavaScript code to your header whenever you switch pages by using the gform_post_paging hook:

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

With that, you will write a function to enqueue your javascript, which will happen whenever your form changes pages. You have the script to add already, you just need to add it now by hooking your function to the gform_post_paging hook. Do you need help with that? It will look something like this:
```
add_action('gform_post_paging', 'enqueue_mindate_script', 10, 2);
function enqueue_mindate_script($form, $is_ajax) {
	// only add the min date script if we're on a page with form 2
	if( 2 == $form['id'] ) {
		// this assumes script is named mindate.js and in the child theme "js" folder.  Dependency on jquery
		wp_enqueue_script('mindate_script', get_stylesheet_directory_uri() . '/js/mindate.js', array('jquery'));
	}
}
```
Save your JavaScript in a file called mindate.js in a folder called js in your child theme. Remove the open and close < script > tags.

mindate.js
```
[js]
jQuery.noConflict();
  jQuery(document).ready(function($) {
		$( "#input_2_35" ).datepicker({ minDate: '+2d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
  });
```
I think that might do it. Please give it a try.
Posted 12 years ago on Friday August 10, 2012 | Permalink

Arggh... this is still not working. Here's what I did:

1) I added this to functions.php:

[php]
/* Enqueue the date script in the paginated Gravity Form */
add_action('gform_post_paging', 'enqueue_mindate_script', 10, 2);
function enqueue_mindate_script($form, $is_ajax) {
	// only add the min date script if we're on a page with form 2
	if( 2 == $form['id'] ) {
		// this assumes script is named mindate.js and in the child theme "js" folder.  Dependency on jquery
		wp_enqueue_script('mindate_script', get_stylesheet_directory_uri() . '/js/mindate.js', array('jquery'));
	}
}

2) I created /js/mindate.js in my child theme with this code:

[js]
jQuery.noConflict();
jQuery(document).ready(function($) {
	$( "#input_2_35" ).datepicker({ minDate: '+2d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
});

*All* dates are still available in the datepicker. I checked again to make sure the ID was right:

[js]
<li id='field_2_35' class='gfield' ><label class='gfield_label' for='input_2_35'>Please select a preferred date for your appointment.</label><div class='ginput_container'><input name='input_35' id='input_2_35' type='text' value='' class='datepicker medium mdy datepicker_with_icon' tabindex='29' /> </div><input type='hidden' id='gforms_calendar_icon_input_2_35' class='gform_hidden' value='http://www.redkitecreative.com/projects/ace/wp-content/plugins/gravityforms/images/calendar.png'/>

Could I have something wrong in my form settings?

Sorry for all the trouble, but if I can't fix this, I have to scrap hours of work and find something else. The client has to be able to restrict dates.

Posted 12 years ago on Tuesday August 21, 2012 | Permalink

redkite
Member
Good news! Something's working - I tried making a new form, and putting this in header.php:
```
<script type="text/javascript">
jQuery.noConflict();
  jQuery(document).ready(function($) {
		$( "#input_4_1" ).datepicker({ minDate: '+2d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
  });
</script>
```
THIS is working - it's here: http://www.redkitecreative.com/projects/ace/faqs/

So is there something wrong with my other form, or my input ID?
Posted 12 years ago on Tuesday August 21, 2012 | Permalink
redkite
Member

Hello?

Posted 12 years ago on Monday August 27, 2012 | Permalink
Chris Hajer
Key Master

I don't see the mindate.js file included in this page:
http://www.redkitecreative.com/projects/ace/schedule-an-appointment/

Is that the problem, or is the problem that when it's included it still does not work?

Posted 12 years ago on Tuesday August 28, 2012 | Permalink

redkite
Member

You're right, mindate.js is not being called on either page of this form (#2). This is my code in functions.js:

/* Enqueue the date script in the paginated Gravity Form */
add_action('gform_post_paging', 'enqueue_mindate_script', 10, 2);
function enqueue_mindate_script($form, $is_ajax) {
	// only add the min date script if we're on a page with form 2
	if( 2 == $form['id'] ) {
		// this assumes script is named mindate.js and in the child theme "js" folder.  Dependency on jquery
		wp_enqueue_script('mindate_script', get_stylesheet_directory_uri() . '/js/mindate.js', array('jquery'));
	}
}

Is something wrong there? /js/mindate.js does exist.

As a side note, if I put *this* code in header.php, mindate *is* working correctly in this other form:

<script type="text/javascript">
jQuery.noConflict();
  jQuery(document).ready(function($) {
		$( "#input_4_1" ).datepicker({ minDate: '+2d', gotoCurrent: true, prevText: '', showOn: 'both', buttonImage: '/wp-content/plugins/gravityforms/images/calendar.png', buttonImageOnly: true });
  });
</script>

I tried switching input_4_1 to input _2_35 and it still doesn't work on the form where I need it to.

Posted 12 years ago on Friday August 31, 2012 | Permalink

bluantinoo
Member

I have similar issue,
I'm able to load the mindate.js only using a generic wp_enqueue_scripts,
does not load with gform_post_paging

unfortunately even if called, my mindate.js does not restrict my dates, not even using a generic .datepicker selector, simple like this:

$( '.datepicker' ).datepicker({ minDate: +1 });

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
Rob Harrell
Member

@redkite, we responded to your priority support request, but I wanted to write the response here as well (since you did not get our response the last time):

When loading javascript on multi-page forms, you'll want to use the gform_post_render JS hook.
http://www.gravityhelp.com/documentation/page/Gform_post_render

Code bound to this event will fire every time the form renders to the page. This is good for because it means that when the second page loads, your datepicker script will be initialized on the field.

As for the datepicker, here is some code I've did a while back to limit the dates which were selectable on the calendar:

http://pastie.org/4800232

Keep in mind, this code is not hooked up for support on mutli-page forms. You'd want want to put this inside the hook I shared above.

Posted 12 years ago on Wednesday September 26, 2012 | Permalink
redkite
Member

Thank you, I got the email too.

Posted 12 years ago on Wednesday September 26, 2012 | Permalink