[Resolved] Limit date range for CRED form date field

[Author]

Posts

[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?

[Christian Cox]

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.

[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

[y.S]

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.

[Christian Cox]

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.

[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

[Christian Cox]

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.

[Christian Cox]

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?

[Christian Cox]

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.

[Christian Cox]

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.

[y.S]

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

[Christian Cox]

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

[scottL-3]

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/