Skip Navigation

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

This thread is resolved. Here is a description of the problem and solution.

Problem: How to customize jquery date picker to hide the available dates on end date based on start date with CRED or Toolset Form

Solution: You need to add custom jQuery code to your form's JS section.

You can find proposed solution, in this case, with the following reply: => https://toolset.com/forums/topic/solution-is-not-working-anymore/page/2/#post-1084324

Relevant Documentation:

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

Last updated by Dido 2 years, 6 months ago.

Assigned support staff: Minesh.

Author
Posts
#1076456

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)

#1077181

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1078637

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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 🙂

#1078695

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

#1078700

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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?

#1078710

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

#1079710

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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

#1081511

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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

#1081570

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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.

#1083698

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

#1083810

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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

#1083954

Hi Minesh,

It looks like the datepicker validator stopped working.

#1083964

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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

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

#1083980

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

#1084324

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

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