Skip Navigation

[Resolved] use custom jquery ui datepicker as the credform datepicker doesn't customize

This support ticket is created 7 years 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.

Sun Mon Tue Wed Thu Fri Sat
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

Author
Posts
#595190

Tell us what you are trying to do?
I have 2 datepickers: FromDate and ToDate
I want to check for previous reservations coming from view loop list in order to disable those dates ranges on the calendar
I want to Add the new From and To Dates on the Cred Commerce order description and update the price based on number of days selected
When the order is placed, the customer will pay and the reservation is secured not to be overwritten

Is there any documentation that you are following?
Jquery Ui DatePicker

Is there a similar example that we can see?

What is the link to your site?
lyk.7pixel.ca

#595275

It is not possible with the Toolset GUI to disable dates on the Calendar Date Picker.
It is limitedly possible with Code.

As example you can restrict the CRED date picker to some dates with:

jQuery(window).bind("load", function() {
   jQuery( ".js-wpt-date" ).datepicker( "option", "yearRange", "2002:2015" , ).datepicker( "option", "dateFormat", 'yy-M-dd' ).datepicker("setDate", 'November 24, 2017');
});

You can also not get those values from Views, as Views is not a Data Provider, but a Data Renderer.
Views will pack the data displayed in certain default HTML, that will break any attribute of any ShortCode or css or html if inserted as such.

I suggest for your goal to either work with a View that displays along with the picker, so the user can manually compare, or to use Custom Code, as the task cannot be achieved with Toolset using the GUI.

#595317

Hello Beda and thank you for your reply,

What if I us the original jquery ui DatePicker then after both dates are selected I pass them to credform datepicker field or text field (How can I do that?)
Where and how the best way to enqueue scripts and styles to this particular page as the recent update of wordpress seems to use “use strict” somewhere that represnts errors from wp-mediaelement.min.js located in /wp-include/

#595866

Let me reply to your doubts below.

What if I us the original jquery ui DatePicker then after both dates are selected I pass them to credform datepicker field or text field (How can I do that?)

What you can do is for example use the cred_save_data() action, and when you get the Data from your custom date picker from the $_POST (since it will be in the form) you can (if not already) strtotime() (convert) that date into a Timestamp and then, update_post_meta() your Custom Types Post Field of type Date.
hidden link
https://toolset.com/documentation/programmer-reference/cred-api/#cred_save_data
https://codex.wordpress.org/Function_Reference/update_post_meta

Where and how the best way to enqueue scripts and styles to this particular page as the recent update of wordpress seems to use “use strict” somewhere that represnts errors from wp-mediaelement.min.js located in /wp-include/

Scripts and styles, in WordPress, should be enqueued from within the Theme's functions.php file.
https://developer.wordpress.org/reference/functions/wp_enqueue_script/
https://developer.wordpress.org/reference/functions/wp_enqueue_style/

I am not aware of the error you mention.
Styles and Scripts are still enqueued the same way in WordPress.

After you enqueue it, you usually need to call the JS functions.
This can then be done in the CRED Form > JS Editor.