Skip Navigation

[Resolved] How to restrict date range in CRED date pickers?

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

Last updated by douglasB 6 years, 6 months ago.

Assigned support staff: Francesco Li Volsi.

Author
Posts
#251893
datepicker-no-restrict.png
datepicker-restrict.png
CRED_datepicker.png

Hello, I'm trying to restrict the range a user can select in a CRED form date picker input (It's a required field in the form).

I'm doing this:

jQuery(document).ready(function($) {
    $( ".js-wpt-date" ).datepicker({ minDate: 0, maxDate: "+2M +1D" });
});

It seems to be working, it restricts the date, but when I submit the form it says "This Field is required", so it isn't filling the field correctly.
Also it disappears the calendar icon, and the date is formatted in a different way ("10/15/2014" not "October 15, 2014")

What am I doing wrong? Is there a way of making this in a correct way?

Thanks

#251914

Hi andresR
i got this let me make some test and i will give answer soon
Thanks
Francesco

#252367

Hi Andres,
i opened a ticket about that to our developer i will update you when we have fixed it and/or if we have a good workaround in meanwhile

Thanks
Francesco

#252378

OK, I keep on waiting for that solution

Regards
Andrés

#254132

Hi Andres,
we have a problem on the date component and we are looking for a good workaround in order to allow you to init the defaul values of datepicker as well.

i will update you as soon as the workaround is working fine
Thanks for your patience
Francesco

#254831

Dear Andres,

In this case we have few thinks:

1. Your code create a new instance of datepicker, but do not change existing one.
2. Your code add datepicker to "div" and "input", not only to input tag.
3. Because all code is running after "document.ready" we must wait a little to change existing datepicker object.

Here is a working code:

    jQuery(document).ready(function($) {
        setTimeout(function() {
            if($( "input.js-wpt-date" )) {
                $("input.js-wpt-date").each(function() {
                    val = $(this).val();
                    $(this).datepicker("option", "minDate", 0);
                    $(this).datepicker("option", "maxDate", "+2M +1D" );
                    $(this).val(val);
                });
            }
        }, 500 );
    });

Please let me know if you are satisfied with my answer and if I can help you with any other questions you might have.

Marcin

#254837

Thanks for your help Marcin, your solution works great!

Regards

Andrés

#305708

@marcin:
Could you please get someone to please post the above code snippet in the CRED Documentation.
I spent 3 days looking for how to get this going... I kept expecting it to be a shortcode argument like in Views and a lot of other plugins.

Specifically on this page:
https://toolset.com/documentation/user-guides/cred-shortcodes/

In a notation about setting defaults for datepickers in CRED Forms.

Thank you.