Datepicker change event

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

Problem: How can I add callbacks to a custom datepicker field using custom JavaScript?

Solution: Use the Datepicker API from jQuery UI to hook into the onClose and onSelect events as needed:

jQuery(document).ready(function(){
  jQuery('input.hasDatepicker').datepicker('option','onClose',function(){
    console.log('close');
  });
  jQuery('input.hasDatepicker').datepicker('option','onSelect',function(){
    console.log('select');
  });
});

Relevant Documentation:
http://api.jqueryui.com/datepicker/#option-onClose

This support ticket is created 6 years, 3 months ago. 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.

This topic is split from https://toolset.com/forums/topic/limit-date-range-for-cred-form-date-field/

Sun	Mon	Tue	Wed	Thu	Fri	Sat
8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	8:00 – 12:00	-	-
13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	13:00 – 17:00	-	-

Supporter timezone: America/New_York (GMT-04:00)

Tagged: Content-submission forms, Toolset Forms

This topic contains 2 replies, has 3 voices.

Last updated by laetitiat 6 years, 3 months ago.

Assisted by: Christian Cox.

Author

Posts

August 23, 2018 at 1:24 pm #1090233

scottL-3

Jumping on slightly old thread here...

If I want to set a second date field to first date field + n days, what change event should I use? I've tried the usually suspects but they don't seem to work with CRED's date field.

August 23, 2018 at 1:37 pm #1090239

Christian Cox

You can use jQuery datepicker onClose as described in their documentation:
http://api.jqueryui.com/datepicker/#option-onClose

In the most recent versions of Forms, the cred-form-ready event isn't as reliable as document ready, so use jQuery(document).ready to initialize all your datepicker code. The 3-parameter datepicker option syntax works best:

jQuery(document).ready(function(){
  jQuery('input.hasDatepicker').datepicker('option','onClose',function(){
    console.log('close');
  });
  jQuery('input.hasDatepicker').datepicker('option','onSelect',function(){
    console.log('select');
  });
});

August 28, 2018 at 11:36 am #1093811

laetitiat

Hi,

I'm trying to do the same thing, but I have some problem :

- First if we use :

jQuery('input.hasDatepicker').datepicker('option','onSelect',function(){
    console.log('select');
  });

It appears that all defaults options are removed (default dateFormat ...), so it seems we have to use onClose event to avoid to overwrite defaults toolset datepicker actions previously defined.

- So using onClose, I'm not able to retrieve datepicker value ? Can you help me with that ?

Thank you very much for your help
Best regards

New threads created by Christian Cox and linked to this one are listed below:

https://toolset.com/forums/topic/get-datepicker-value-onclose/