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.

Alternate Datepicker

  1. Trisha
    Member

    I have a custom-written jQuery datepicker that I'd prefer to use, and I've been able to successfully, however, it's a required field and upon validation, if the field is not filled in, the plugin reverts to it's own built-in datepicker.

    How can I override this to continue using my own datepicker upon validation?

    If you're interested, what my version does that I need is this:

    I have two date fields - check in and check out.

    My datepicker does not allow for a date prior to one day ahead of the current date to be selected on the first date, and the second date must be 7 or more days, but no more than 30 days, after the first date selected. It also has different styling and displays two months at a time, but those I can modify myself - the rest I can't since I'm not a coder, hence my custom script that someone else did for me.

    If you can tell me specifically how to modify the built-in datepicker I would use it, otherwise I just need to know how to continue using mine on validation.

    Thanks for any help you can lend....

    Posted 10 years ago on Friday September 9, 2011 | Permalink
  2. The datepicker is the standard jQuery UI datepicker which has a lot of customization options.

    http://jqueryui.com/demos/datepicker/

    If you would like to customize the look or functionality, check out that documentation. If you would like help getting your datepicker to load after a validation failure, please post a link to your form. Thanks

    Posted 10 years ago on Monday September 12, 2011 | Permalink
  3. Trisha
    Member

    Hi Chris

    It could very well be that everyone else who uses the Gravity Forms plugin is a coder, sadly I am not.....So while I looked through all the demos you pointed me to, I cannot figure out to get the included datepicker to work as our custom one does.

    What's most important about our custom datepicker is that the first date is used to determine the starting point of the second date, which is a minimum of 7 days, but no more than 30 days, after the first date.

    Setting rangeSelect to "true" will not work for us since we need the dates in two separate fields in order to be parsed into an external database correctly.

    When I try to incorporate some of the code from the jQuery demo site, the datepicker breaks completely, but again I'm sure it's because I'm not a coder and not implementing correctly.

    Unfortunately I can't post a link to the form because I can't make it live until I get this worked out - our existing form and datepicker has too much use for me to do live testing.

    Posted 10 years ago on Wednesday September 14, 2011 | Permalink
  4. I don't think we'll be able to help debug the problem you're having without a link to the form. If you can copy the form and insert it into another (new, non-public) page, we can take a look at how you've implemented it and see what the problem is.

    Posted 10 years ago on Wednesday September 14, 2011 | Permalink
  5. Trisha
    Member

    Hi Chris
    Sorry for the long delay.......here is a link to the form using our own custom datepicker.

    http://www.allinclusivefyi.com/

    As you can see by playing around with the two calendar fields, the second date field is tied to the first, so that even if you go a few months into the future, the second date picks up where the first date is set.

    The two fields themselves are set as a Text field because the Date field only works with your datepicker, or displays as three separate fields (month, day, year). Our config script for our datepicker finds those text fields by their ID, displays the calendar icon, shows 2 months side-by-side, and ties the two dates together. At the end of this post I put the config code that we use, but if you need it I can also include the jquery minimized .js also - it's just hard to read because I don't have an unminimized version.

    The problem is not with *using* our calendar, it works fine, but if I make those required fields (which they need to be) and they are not filled in, then upon form validation they become inactive and can't be used.

    So there is something in the validation code that renders them useless.

    I have spent a lot of time trying to modify the configuration for the datepicker included with gravity forms, and cannot get it to behave like our custom datepicker, even after spending days on the jQuery site and trying many different things.....

    Also, because you're using some custom class names for your styles, I'm not able to use our own stylesheets and can't get yours to look remotely like ours - all of the other datepicker themes I've looked at stayed very consistent with class names, so all we had to do was modify our stylesheet, but that doesn't work here - there's no allowances for rounded corners or overlays.

    Here is how ours is configured:

    [js]
    $(function() {
    	$("#DepartureDate").datepicker(
    		{
    			"showOn": "both",
    			"numberOfMonths": 2,
    			"buttonImage": "/img/calendar.gif",
    			"buttonImageOnly": true,
    			"minDate": 0,
    			"onSelect": function(dateText, inst) {
    				$('#ReturnDate').datepicker('option', 'minDate' ,new Date(dateText));
    			}
    		}
    	);
    
    	$("#ReturnDate").datepicker(
    		{
    			"showOn": "both",
    			"numberOfMonths": 2,
    			"buttonImage": "/img/calendar.gif",
    			"buttonImageOnly": true,
    			"minDate": +1
    		}
    	);
    });
    Posted 10 years ago on Tuesday September 20, 2011 | Permalink
  6. Hi Trisha,

    The issue is that the form is being submitted with AJAX. The calendar is correctly initialized on the initial page load, but since the your calendar initialization function does not fire every time the form is submitted via AJAX, the calendar is not re-initialized.

    To re-initialize the script every time the form is rendered use the gform_pre_render script to initialize your calendar function. Here is an example:

    http://pastie.org/2574323

    Posted 10 years ago on Thursday September 22, 2011 | Permalink
  7. Trisha
    Member

    Thanks David, I followed your instructions but I must still be doing something wrong........I've added the code below to our functions.php and created a TEST form, that is called from a TEST page (I can't do testing on our live form, which gets a lot of use).......however, now the test form won't render at all, instead I get "Oops! We could not locate your form."

    I've verified that the form is indeed still a working form, without the filter & script added it works fine. I used a unique header called from a template I use for testing, so it enqueues the correct form ID (2)

    Since the test form has an id of 2, the code below was modified to refer only to form ID 2 and to add our datepicker script, changing the input IDs to the correct ones form form 2, as follows.

    // Gravity forms - code to refire calendar script on form submission for validation
    add_filter('gform_pre_render_2', 'add_calendar_script');
    function add_calendar_script() {
     ?>
    <script type="text/css">
     jQuery(document).ready(function($){
    
      $(function() {
    	$("#input_2_20").datepicker(
    		{
    			"showOn": "both",
    			"numberOfMonths": 2,
    			"buttonImage": "/images/calendar.gif",
    			"buttonImageOnly": true,
    			"minDate": 0,
    			"onSelect": function(dateText, inst) {
    				$('#input_2_21').datepicker('option', 'minDate' ,new Date(dateText));
    			}
    		}
    	);
    
    	$("#input_2_21").datepicker(
    		{
    			"showOn": "both",
    			"numberOfMonths": 2,
      			"buttonImage": "/images/calendar.gif",
    			"buttonImageOnly": true,
    			"minDate": +1
    		}
    	);
    });
    </script>
    <?php
    }

    When I view the source code I see the datepicker script, and following that just the paragraph with the error message.

    What have I missed?

    Posted 10 years ago on Friday September 23, 2011 | Permalink
  8. Hi Trisha,

    We decided to go ahead and add a javascript hook so you can bind a function to it rather than having to output the script on each form rendering. I will send you and updated version of Gravity Forms by email.

    The hook we added is called "gform_post_render". Remember, this is a javascript hook so you'll need to "bind" your custom function to it a little differently than with PHP. Here is a working example customized from the code you provided above.

    http://pastie.org/2582836

    This code is currently inside of a script block; however, it will work just as well in an actual javascript file (ie custom.js, init.js, etc). Let me know if you have any questions about implementation.

    Posted 10 years ago on Saturday September 24, 2011 | Permalink
  9. For others who are interested in using this hook, you can email me for the latest version of Gravity Forms. To read more about this hook, the documentation is now available here:

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

    Posted 10 years ago on Saturday September 24, 2011 | Permalink

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