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.

Help getting datepicker minDate working in WordPress

  1. 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 9 years ago on Saturday August 4, 2012 | Permalink
  2. 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 9 years ago on Saturday August 4, 2012 | Permalink
  3. Yes, I'm trying to set it so the earliest possible date is two days in the future.

    Thanks! :)

    Posted 9 years ago on Saturday August 4, 2012 | Permalink
  4. Got it. Let me look into that and see what's going on. Thanks for the clarification.

    Posted 9 years ago on Saturday August 4, 2012 | Permalink
  5. Hi, can someone get back to me on this issue? The site's pretty close to launch time. Thanks!

    Posted 9 years ago on Tuesday August 7, 2012 | Permalink
  6. 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 9 years ago on Wednesday August 8, 2012 | Permalink
  7. 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 9 years ago on Wednesday August 8, 2012 | Permalink
  8. 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 9 years ago on Thursday August 9, 2012 | Permalink
  9. 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 9 years ago on Friday August 10, 2012 | Permalink
  10. 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 9 years ago on Friday August 10, 2012 | Permalink
  11. 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 9 years ago on Tuesday August 21, 2012 | Permalink
  12. 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 9 years ago on Tuesday August 21, 2012 | Permalink
  13. Hello?

    Posted 9 years ago on Monday August 27, 2012 | Permalink
  14. 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 9 years ago on Tuesday August 28, 2012 | Permalink
  15. 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 9 years ago on Friday August 31, 2012 | Permalink
  16. 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 9 years ago on Wednesday September 26, 2012 | Permalink
  17. @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 9 years ago on Wednesday September 26, 2012 | Permalink
  18. Thank you, I got the email too.

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