Gravity Forms Start and End Date Picker for Multisite

Question

I came across this question/answer which has got me 99% of where I want to be, but I'm using this in the context of a multisite with one theme, and deployment of that theme across 6 other sites.

You can see the published form here with the date fields (Arrival and Departure times) and you can see it's working just fine. However...

I want to deploy this across multiple sites in the multisite network but in doing so I need to account for the fact that it's possible, given the variations in the forms on each site, that the field IDs could differ from site to site. I'm kind of ok at reading JS, so I can see what's happening here, but I have no idea how to write in the conditonals to allow for checking the site ids/urls and adjusting the #input_1_1 tags accordingly... is this possible? If so, what would it look like?

Here's the code I'm using...

jQuery(document).bind('gform_post_render', function() {
// destroy default Gravity Form datepicker
jQuery("#input_1_6").datepicker('destroy');
// create new custom datepicker
jQuery('#input_1_6').datepicker({
    minDate: 1,
    defaultDate: 0,
    dateFormat: "d/mm/yy",
    changeMonth: true,
    changeYear: true,
    onClose: function(dateText, inst) {
        var d = jQuery.datepicker.parseDate(inst.settings.dateFormat, dateText);
        d.setDate(d.getDate() + 1);
        jQuery('#input_1_43').val(jQuery.datepicker.formatDate(inst.settings.dateFormat, d));
        jQuery('#input_1_43').datepicker('option', {
            minDate: jQuery.datepicker.formatDate(inst.settings.dateFormat, d)
        });
    }
});
// destroy default Gravity Form datepicker
jQuery('#input_1_43').datepicker('destroy');
jQuery('#input_1_43').datepicker({
    minDate: "d",
    defaultDate: "d",
    dateFormat: "dd/mm/yy",
    changeMonth: true,
    changeYear: false,
});

}

Any suggestions you can offer would be really appreciated, thanks!

Dave from Gravity Wiz Dave from Gravity Wiz · Accepted Answer · 2015-01-02T20:26:02

One way would be to use the CSS Class Name setting on the start and end date fields. So the start date field would have a class of "dee-start-date" and the end date field would have a class of "dee-end-date". The jQuery selectors could then be changed like so:

jQuery("#input_1_6")

...would be become:

jQuery(".dee-start-date input")

And the end date:

jQuery("#input_1_43")

...would become:

jQuery(".dee-end-date input")

This just makes the code a bit more generic and allows you to administer which fields it applies to from the GF admin rather than the code itself.

Gravity Forms Start and End Date Picker for Multisite

1 Answers