Multiple Datepickers - Date Range Restriction

This thread is resolved. Here is a description of the problem and solution.

Problem:

I've successfully implemented the following javascript for a single date field entry to only allow dates to be selected within the next 90 days, and not before 'Today':

jQuery(window).bind("load", function() {
  jQuery('[id^="cred_form_163_1-textfield"]').datepicker('option',{minDate: 0,maxDate: 90});
});

This also works for the 'first' field of a multiple date field, but I cannot find the id or class to apply the script to the second, third, etc, multiple instances of date fields

Solution:

You can use jQuery('.js-wpt-date[name^="wpcf-repeat-event-start-date-time"]').last() to locate the new datepicker.

For example, below JS codes:

jQuery(document).on( "toolset_repetitive_field_added", function() {
    jQuery('.js-wpt-date[name^="wpcf-repeat-event-start-date-time"]').last().datepicker('option',{minDate: 0,maxDate: 90});
});

Relevant Documentation:

This support ticket is created 6 years, 10 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	9:00 – 13:00	-
-	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	14:00 – 18:00	-

Supporter timezone: Asia/Hong_Kong (GMT+08:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 5 replies, has 2 voices.

Last updated by Luo Yang 6 years, 10 months ago.

Assisted by: Luo Yang.

Author

Posts

January 16, 2018 at 4:04 pm #606824

Gavin

Tell us what you are trying to do?

I've successfully implemented the following javascript for a single date field entry to only allow dates to be selected within the next 90 days, and not before 'Today':

jQuery(window).bind("load", function() {
  jQuery('[id^="cred_form_163_1-textfield"]').datepicker('option',{minDate: 0,maxDate: 90});
});

This also works for the 'first' field of a multiple date field, but I cannot find the id or class to apply the script to the second, third, etc, multiple instances of date fields (on the example shown at hidden link the field shown after Repeat Event is selected.

Is there any documentation that you are following?
https://toolset.com/forums/topic/limit-date-range-for-cred-form-date-field/

What is the link to your site?
hidden link

January 17, 2018 at 7:04 am #606985

Luo Yang

Dear Gavin,

It is a custom JavaScript codes problem, there isn't such a built-in feature within CRED form, I checked the URL you mentioned above:
hidden link
But can not find any datepicker in it, so I am not sure which one is the HTML ID or class you need, please provide a test site with the same problem, and fill below private detail box with login details, also point out the problem page URL and CRED form URL, describe detail steps for how and where I can see the datepicker. I need a live website to test and debug, thanks

January 19, 2018 at 3:46 am #607850

Luo Yang

Thanks for the details, I can login your website, will feedback if there is anything found

January 19, 2018 at 5:27 am #607859

Luo Yang

You can use jQuery('.js-wpt-date[name^="wpcf-repeat-event-start-date-time"]').last() to locate the new datepicker.

I have done below modification in your website, edit the CRED form, click "JS Editor", line 5~7, add below JS codes:

jQuery(document).on( "toolset_repetitive_field_added", function() {
	jQuery('.js-wpt-date[name^="wpcf-repeat-event-start-date-time"]').last().datepicker('option',{minDate: 0,maxDate: 90});
});

Please test again, check if it is fixed, thanks

January 19, 2018 at 12:53 pm #607948

Gavin

Thank you Luoy - that's fixed it. Perfect.

All the best. Gavin.

January 22, 2018 at 1:35 am #608421

Luo Yang

You are welcome