Skip Navigation

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

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

Problem: How to customize custom date datepicker field with Toolset CRED form.

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.

Solution: You need to update the custom date datepicker field added to Toolset form by adding custom javascript code to your form's JS box.

You can find proposed solution, in this case, with the following reply: https://toolset.com/forums/topic/calendar-dates/#post-956513

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 9 replies, has 3 voices.

Last updated by Dido 2 years, 10 months ago.

Assigned support staff: Minesh.

Author
Posts
#924203
period.JPG

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?

#924555

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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.

#924813

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.

#948027

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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.

#950252

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

#951067

Luo Yang
Supporter

Languages: English (English ) Chinese (Simplified) (简体中文 )

Timezone: Asia/Hong_Kong (GMT+08:00)

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

#953576

Minesh
Supporter

Languages: English (English )

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

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.

#955690

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.

#956513

Minesh
Supporter

Languages: English (English )

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

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.

#956681

Thank you very much! It is working fine now.