Skip Navigation

[Resolved] Limit date range for CRED form date field

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

Problem: I would like to limit the date range in my CRED form's datepicker field, but the JavaScript I have applied does not seem to have the desired effect.

Solution: Use the custom 'cred_form_ready' event instead of the document ready event to bind JavaScript functionality to CRED form elements like datepicker fields:

jQuery(document).on('cred_form_ready', function() {
   
  jQuery( '[id^=cred_form_42_1-textfield-1]' ).datepicker({ 
      minDate: -60, 
      maxDate: -1
    }); 
   
 });

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 12 replies, has 3 voices.

Last updated by scottL-3 3 years, 11 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#579411

y.S

I'd like to limit the possible dates to select from to range from yesterday til 60 days back.

I have added this in the script editor

jQuery(document).ready(function() {
 
  jQuery( '[id^=cred_form_42_1-textfield-1]' ).datepicker({ 
      minDate: -60, 
      maxDate: -1
    }); 
 
 });

The selector is correct. When I add

.css('color', 'red')

the selected date shows up in red in the input field.

What I was expecting to see was all dates not in -1/-60 range to be greyed out, not selectable. But that is not happening. Every date is selectable no matter how far away in the past or the future.

I have read the documentation of the datepicker, I have searched this and many other forums. I have tried my code with this online snippet hidden link and it seems to work fine there.

How do I get it to work on my CRED form?

#579621

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Hi, when you're working in a CRED form it's best not to use the document ready event to perform your JS initializations - this event happens too soon. CSS will work like this, but not JS. Instead, you should listen to the custom 'cred_form_ready' event registered on the document object:

jQuery(document).on('cred_form_ready', function() {
  
  jQuery( '[id^=cred_form_42_1-textfield-1]' ).datepicker({ 
      minDate: -60, 
      maxDate: -1
    }); 
  
 });

Please try this and let me know the results.

#579628

y.S

Thanks, that works.

All I could find in other topics was window.onLoad, but that didn't work either.
Is this documented somewhere?

Regards

#579652

y.S
date-field.JPG

Small error after applying the code.

The calendar/date icon doesn't show up next to the field anymore, which is something I can live with but just thought I would mention this anyway.

Clicking the (date) input field makes the calendar pop up, with a limited range, as expected, but when I try to send the form an errormessage shows up saying the date field can not be left empty. Which is kind of weird as there is obviously some date in there. See screenshot.

I noticed there is also a hidden field. Not sure if that is causing the problem. I could populate it using javascript but guess it should populate itself.

I hope you can shed some light on this.

#579663

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Hi, my guess is that your selector is a bit to broad, and it's applying a datepicker to the wrong element. Try adding '.hasDatepicker' to make sure this is set correctly, and for the best results, be sure to use the "option" key for the object you pass into the datepicker function:

jQuery('[id^=cred_form_42_1-textfield-1].hasDatepicker').datepicker('option',{minDate:-20, maxDate:-2});

If this doesn't work out as expected, I may need to see this in a browser to make a more accurate recommendation.

#579866

y.S

Hi,

I would appreciate if you could take a look at my staging setup.

Adding, .hasDatepicker to the selector and/or 'option' to the datepicker function, seems to result in the settings not being used at all.

I am not so sure my selector is too broad. Doing a search for the selector phrase in the "Inspect Element" screen only shows three results, being :
- the label (not as ID so should trigger)
- the actual inputfield, which should trigger
- the javascript code itself (which also should not trigger)

Regards

#579985

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Okay yes, please provide instructions to access the datepicker in your staging site. I will activate private reply fields so you can provide login credentials if necessary.

#580009

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Okay thanks, I have added a timeout of 0 to force the initialization code to run a bit later in the load sequence:

setTimeout(function(){jQuery('[id^="cred_form_42_1-textfield-1-"]').datepicker('option',{minDate: -60,maxDate: -1});},0);

I'm not completely sure why this is necessary, so I will continue to investigate. But for now, it appears to be working correctly. Can you confirm?

#580021

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Okay I've replicated the datepicker option issue on a clean installation, so it appears to be a bug. I've reported this issue to our 2nd tier support team for further investigation and confirmation. Stand by and I will keep you posted here as I receive more information about that.

#580254

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Okay I have been informed that the preferred event has been updated. Now it's best to use the window object's load event, and you can remove the setTimeout:

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

Please let me know if this does not resolve the issue completely, and I will take another look.

#580330

y.S

Thanks, this works.
Added a few more options and all is good. 🙂

#580350

Christian Cox
Supporter

Languages: English (English )

Timezone: America/New_York (GMT-04:00)

Great, I'm asking to get our documentation updated so this event hook is communicated to other users.

#1089614

Jumping on slightly old thread here...

If I want to set a second date field to first date field + n days, what change event should I use? I've tried the usually suspects but they don't seem to work with CRED's date field.

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/datepicker-change-event/