[Gelöst] DatePicker min max range based on selections

[Author]

Artikel

[arisG]

I am using this js code on my post form to manipulate the datepickers:

jQuery(document).ready(function() {
    var fromId = jQuery('input[name="wpcf-post-date[display-only]"]').attr('id');
    var toId = jQuery('input[name="wpcf-post-end-date[display-only]"]').attr('id');  
    var $from = jQuery( '#' + fromId );
    var $to = jQuery( '#' + toId );
   
    $from.datepicker('option', 'dateFormat', 'd MM yy' );
    //$from.datepicker('option', 'minDate',0);
    $from.datepicker('option', 'onSelect', function( selectedDate, obj ) {
		$to.datepicker( "option", "minDate", selectedDate );      
    });

    $to.datepicker('option', 'dateFormat', 'd MM yy' );
    $to.datepicker('option', 'onSelect', function( selectedDate, obj ) {
        $from.datepicker( "option", "maxDate", selectedDate );
    });
});

I can see the datepickers range is working based on selection but the value is not saved on the form. So when I submit the form I get error fields are required (because the value is not set).

I see there are many references on the forum but can't make that work. Thanks

[Christian Cox]

Hello, this is a tricky issue because there is no consistent "form ready" event hook for JavaScript initialization. The jQuery document ready event is too soon, because Forms does other manipulation to the datepicker after document ready. So any initialization you do on document ready is prone to be overwritten. Instead, you can try wrapping your code in a short timeout, but you should be aware that this is a hack and it's not 100% guaranteed to work. Unfortunately until our developers add a consistent event hook for the form ready event, this is the best solution available.

jQuery(document).ready(function() {
    setTimeout(function() {
        var fromId = jQuery('input[name="wpcf-post-date[display-only]"]').attr('id');
        // ... your code continues here
    }, 500 );
});

If this update doesn't resolve the problem, I'll need to see the Form on the front-end of your site to make other recommendations.

[arisG]

Hi, thanks for your prompt reply. I already saw that on other tickets, tried it but with no luck.
Notice that the js code is working as expected. I can see that when this js code is in place the ajax request in the picture above is not fired. Please mark the next reply as private so I can provide you the credentials. thanks

[Christian Cox]

Private reply fields are enabled.

[Christian Cox]

Okay I took a look at your site and code, and I don't see that you're doing anything wrong. This just isn't working, because Forms internal JavaScript is not designed to support changing datepicker options in the onSelect or onClose event handlers at this time. There are multiple inputs in play for each datepicker you see on the front-end with various event handlers, and the custom JavaScript shown in your example doesn't update the datepicker fields as needed behind the scenes when the options are modified.

Our lead developer has informed us that since the initialization event hook isn't reliable yet, there is no good solution here short of a fully custom datepicker implementation. As it turns out, we are unable to document or provide any working solutions to this problem right now, because of the unreliable event limitation. If you'd like to see more reliable ways to manipulate the built-in Forms datepicker options based on input events from other datepickers, I encourage you to submit your request in our feature request form here: https://toolset.com/home/contact-us/suggest-a-new-feature-for-toolset/

This will let our management know you want this feature addressed in a future release of Forms.

[arisG]

Thanks for your time, I will create a feature request as I believe that this is a big gap on forms.

[Christian Cox]

Thank you for your input, I hope to see this feature added very soon because I agree it's important for User experience.