Skip Navigation

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

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

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 support ticket is created vor 6 Jahren, 3 Monaten. There's a good chance that you are reading advice that it now obsolete.

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.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

Dieses Thema enthält 23 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von Dido vor 6 Jahren, 2 Monaten.

Assistiert von: Minesh.

Author
Artikel
#1076456
niet.JPG

Hi,

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

versteckter 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

Sprachen: Englisch (English )

Zeitzone: 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

Sprachen: Englisch (English )

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

Well - could you please check now: versteckter 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

Sprachen: Englisch (English )

Zeitzone: 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

Sprachen: Englisch (English )

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

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

#1081511

Minesh
Supporter

Sprachen: Englisch (English )

Zeitzone: 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:
=> versteckter Link

#1081570

Minesh
Supporter

Sprachen: Englisch (English )

Zeitzone: 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>versteckter 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>versteckter 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

Sprachen: Englisch (English )

Zeitzone: 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:
=> versteckter Link

#1083954

Hi Minesh,

It looks like the datepicker validator stopped working.

#1083964

Minesh
Supporter

Sprachen: Englisch (English )

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

Sorry - I see validation is working:
=> versteckter Link

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

#1083980
datum-1.JPG
datum.JPG

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

Sprachen: Englisch (English )

Zeitzone: 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:
=> versteckter Link