[Resolved] How to customize custom date datepicker field with Toolset CRED form.

[Author]

Posts

[Dido]

Hi, We are working on a house exchange website. in the CRED form I have 2 dates. A start date and an end date, for the availlability of a property. The start date must be a date in the future and the end date must be greater then the start date. Is there a way to make sure people don't make mistakes with entering dates?

[Luo Yang]

Hello,

There isn't such a built-in feature within Toolset form plugin, see our document:
https://toolset.com/documentation/user-guides/cred-shortcodes/#cred_field
No option to setup the range of date-picker.

You might consider using custom JS codes, for example this thread:
https://toolset.com/forums/topic/multiple-datepickers-date-range-restriction/

And Toolset form is using Jquery UI date-picker, here is the document for it:
hidden link

For your reference.

[Dido]

Hi, we tried your suggestion as given in your second link, namely:
jQuery(window).bind("load", function() {
jQuery('[id^="cred_form_163_1-textfield"]').datepicker('option',{minDate: 0,maxDate: 90});
});
replacing "163" by the id of our CRED form and "textfield" by the name of our field to be validated.
We also tried jQuery('#start-date').datepicker('option', 'minDate', new Date());
because it did not seem logical to have to specify the CRED form when pasting code beneath it.
Neither of these attempts worked. We really want this to work and we depend on Toolset.
If there are no built-in functions to do simple validations, at least it should be easy to implement a work-around.

[Luo Yang]

Above custom codes is only an example, you will need to customize it according to your website site settings, if you need assistance for it, please provide a test site with the same problem, I can setup an example for you.

And as I mentioned above, There isn't such a built-in feature within Toolset form plugin, if you agree we can take it as a feature request, our developers will evaluate it.

[Dido]

Hi Luo,
Since the websites is in maintanance mode, still in progress, you can have acces to this website.

[Luo Yang]

OK, I have enabled the private message box, please provide your website credentials, also point out the problem page URL, thanks

[Minesh]

Luo is on Vacation. This is Minesh here and I will take care of this ticket and try to help you further. Hope this is OK.

First of all - I've applied the following patch on your install, as it's required to save custom CSS/JS added to Form:
=> https://toolset.com/errata/quotes-in-the-extra-css-or-js-content-will-get-backslashed/

Once above patch applied, I've added following JS code to your Form's JS box:

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');

$( "#"+from ).datepicker({
    changeMonth: true,
    changeYear: true,
     minDate: 0,
    buttonImage: "<em><u>hidden link</u></em>",
    showOn: "button", 
    onClose: function( selectedDate ) {
      $( "#"+to ).datepicker( "option", "minDate", selectedDate );
    }
  });
  
  $( "#"+to ).datepicker({
    changeMonth: true,
    changeYear: true,
    minDate: 0,
    buttonImage: "<em><u>hidden link</u></em>",
    showOn: "button", 
    onClose: function( selectedDate ) {
     $( "#"+from ).datepicker( "option", "maxDate", selectedDate );
    }
  });  
});

I've added following CSS to your form's CSS box:

.form-group .ui-datepicker-trigger {
  border:0px;
  background-color:transparent !important;
}

I can see that datepicker has values now as per your requirement. Could you please confirm.

[Dido]

Many thanks for this. It works like a charm when I use Firefox 60.1.0esr (64-bit).
However, it has no effect when I use 60.1.0 (64-bit) normal Firefox.
The difference between the ESR and the normal Firefox being that the ESR has wider support for NPAPI (technology required for Java-applets). However, clients of my client are unlikely to install the ESR version.
So could this be made to work for those using a normal version of Firefox?
Symptom: dates in the past are not grayed out in the datepicker when I use the normal Firefox.
Many thanks in advance.

[Minesh]

Well - I've adjusted the JS code as given under:

jQuery(document).ready(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');
 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 its working now. Please when you try to check dont forget to DELETE the browser cache once.

[Dido]

Thank you very much! It is working fine now.