[Resolved] Datepicker selection range

[Author]

Posts

[serenus]

I am trying to restrict event date range in my Cred form.

I inserted the code found here (https://toolset.com/forums/topic/multiple-datepickers-date-range-restriction/) as snippet in custom code. I adjusted the min and max to specific timestamp dates.

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

I get a syntax error, unexpected '{' in line 9 (second line above) and it does not work. What am I missing?

[Luo Yang]

Hello,

The ticket you mentioned above is for a repeating field, that user want to setup the date range of new date field instance.

If you are using a repeating date field "start-date", please try to modify your JS codes as below:

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

To setup the Datepicker options, please check JqueryUI document here:
hidden link

[serenus]

I still get a syntax error with your code.

However, I think that I may be going in the wrong direction anyways. What I would like to achieve is all datepickers in the website (forms and searches) to be restricted to the same range (minDate: 1551657600000,maxDate: 1552262399000).

Is that possible as one piece of 'universal' code or do I have to work one element at a time?

[Luo Yang]

Here is a test site:
hidden link
username/password: xgren/111111

1) Create a repeating custom date field "start-date":
hidden link

2) Create a Toolset form for creating post:
hidden link

In section "Content", click "JS Editor", add below JS codes:

jQuery(document).on( "toolset_repetitive_field_added", function($parent) { // new instance of repeating custom date field
    jQuery('.js-wpt-date[name^="wpcf-start-date"]').last().datepicker('option',{
      minDate: new Date( 2018, 12, 17 ),
      maxDate: new Date( 2019, 12, 31 )
    });
});

jQuery(document).ready(function($) {
    setTimeout(function() {
      $('.js-wpt-date[name^="wpcf-start-date"]').each(function() { // the first instance custom date field
        val = $(this).val();
        $(this).datepicker('option', {
      		minDate: new Date( 2018, 12, 17 ),
      		maxDate: new Date( 2019, 12, 31 )
        });
        $(this).val(val);
      });
    }, 500 );
});

3) Test it in front-end:
hidden link

It works fine. And it is only a demo for your reference.

Q1) I still get a syntax error with your code.
I suggest you check compatibility issues in your website, for example deactivate other plugin and theme, remove other custom JS codes

Q2) What I would like to achieve is all datepickers in the website (forms and searches) to be restricted to the same range
You will follow Jquery document to setup the date value, see it here:
hidden link
for example:
minDate: new Date( 2018, 12, 17 ),

Q3) Is that possible as one piece of 'universal' code or do I have to work one element at a time?
The new instances of repeating date field do not support 'universal' code, I suggest you work one element at a time.

Hope it is clear

[serenus]

Odd to have to set January as 0, February as 1, ...

Thanks a million! So glad to have found Toolset. What a great WordPress tool.