Skip Navigation

[Resolved] 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 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.

This topic contains 5 replies, has 2 voices.

Last updated by Luo Yang 3 years, 9 months ago.

Assigned support staff: Luo Yang.

Author
Posts
#606824
toolset-datepicker-second.JPG
toolset-datepicker-first.JPG

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

#606985

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#607850

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#607859

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#607948

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

All the best. Gavin.

#608421

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

You are welcome