[Resolved] How to customize jquery date picker to hide the available dates on end date based on start date with CRED

[Author]

Posts

[Dido]

Hi,

You gave me a solution on https://toolset.com/forums/topic/calendar-dates/ but it is not working properly.

hidden link

I don't know what I am doing wrong.
the datepicker works, but after submitting the form, I get an error on the date fields (screenshot)

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - could you please share access details so I can check whats going wrong there again.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - could you please check now: hidden link

Please clear your browser cache once.

The thing is that you may have updated the Toolset Form (CRED) plugin recently and the patch I've applied is overwritten.
=> https://toolset.com/errata/quotes-in-the-extra-css-or-js-content-will-get-backslashed/

The above patch is set to be published with Toolset Froms version 2.1. Please remember this 🙂

[Dido]

Sorry, but why have you disabled the javascript code? (I see /* )
now the datepicker solution you added is not working anymore.

[Minesh]

Well - I see its working, please clear cache.

And the commented code was commented before as well. You will see the working code just below the commented code. Is it still not working?

[Dido]

no, still not working. I keep receiving the message "This field is required." The datepicker is working, you're right about that.

[Minesh]

I'm working on this and I'll update you on this on Monday.

[Minesh]

Well - I'm trying to work on form but now when I try to edit the form Huis aanbod voor Sitters (ID: 2699) it shows me 404 error.

could you please make this form available to edit and the strange thing is on frontend the form just working fine:
=> hidden link

[Minesh]

Ok - Fianally..

I've adjusted the JS code within your form as given under:

jQuery(document).ready(function($){

from = jQuery('input[name="wpcf-start-date[display-only]"').attr('id');
to = jQuery('input[name="wpcf-end-date[display-only]"').attr('id');


var fromId_alt = jQuery('[name="wpcf-start-date[datepicker]"').attr('id');
 var toId_alt = jQuery('[name="wpcf-end-date[datepicker]"').attr('id');
 
 
$( "#"+from ).datepicker({
    changeMonth: true,
    changeYear: true,
     minDate: 0,
     altField:'#'+fromId_alt,
     altFormat:'@',
    buttonImage: "<em><u>hidden link</u></em>",
    showOn: "button", 
    onClose: function( selectedDate ) {
              jQuery( "#"+to ).datepicker( "option", "minDate", selectedDate );
              stamp =  jQuery('#'+fromId_alt).val()/1000;
              jQuery('#'+fromId_alt).val(stamp);
       }
   
  });
   
  $( "#"+to ).datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    altField:'#'+toId_alt,
     altFormat:'@',
    buttonImage: "<em><u>hidden link</u></em>",
    showOn: "button", 
     onClose: function( selectedDate ) {
              ts =  jQuery('#'+toId_alt).val()/1000;
              jQuery('#'+toId_alt).val(ts);
       }
  });  
  
  
});

I can see its working now - could you please confirm.

[Dido]

no, still not working. can you give me the complete js code? Maybe I do something wrong with the code.

[Minesh]

Well - the code I shared here is full code:
=> https://toolset.com/forums/topic/solution-is-not-working-anymore/#post-1081570

You just need to copy/paste it within your Form's JS box section. Please note that the field name should be exactly the same. Please remove your browser and server cache as well.

I see when I submit the form - I can see the entry in backend:
=> hidden link

[Dido]

Hi Minesh,

It looks like the datepicker validator stopped working.

[Minesh]

Sorry - I see validation is working:
=> hidden link

Could you please tell me which validation for date-picker is not working?

[Dido]

I am confused about all this. Have you in mind what we had before?
https://toolset.com/forums/topic/calendar-dates/#post-955690

I get datum.jpg, but I expect datum-1.jpg

[Minesh]

Could you please check now. I've adjusted the code as given under and I tested with FireFox and its working:

jQuery(document).ready(function($){

jQuery(window).load(function() {

	var fromId = jQuery('input[name="wpcf-start-date[display-only]"').attr('id');
	var toId = jQuery('input[name="wpcf-end-date[display-only]"').attr('id');

  		jQuery( "#"+fromId ).datepicker("option","minDate",0);
  		jQuery( "#"+toId ).datepicker("option","minDate",0);
    
   		jQuery( "#"+toId ).datepicker("option","beforeShow",function(){
        					    start_date_value = jQuery('#'+fromId).val();
            					return { minDate: new Date(start_date_value)  }; 
   							});

});   
   
});

Could you please confirm it works at your end as well:
=> hidden link