Skip Navigation

[Resolved] 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 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 2 replies, has 3 voices.

Last updated by laetitiat 3 years, 2 months ago.

Assigned support staff: Christian Cox.

Author
Posts
#1090233

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.

#1090239

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');
  });
});
#1093811

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/