Alternate Datepicker

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....

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.

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
		}
	);
});

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?

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