[Resolved] Input field of date is read only

[Author]

Posts

[stuartm-2]

Im adding input fields for a CRED form and for some reason the date field is read only by default. See picture attached.
Is there a choice somewhere to change that?

Thank you

[Christian Cox]

That's to be expected here, the input itself is readonly for display and the datepicker widget handles showing and hiding the properly formatted contents in the input area. Is the datepicker not triggering when you click or tab into the field?

[stuartm-2]

Hello Christian,
That is the issue here its not triggering anything, tabbing or clicking on it dosent do anything.
Any idea why?

[Christian Cox]

Offhand no, but it's probably a jQuery UI conflict or issue because that's what Forms use to display the datepicker widget. Can you try these troubleshooting steps first?
- Temporarily disable any custom code snippets in place on the site
- Update Toolset plugins to the latest versions
- Disable all plugins except Types, Views and Forms
- Temporarily switch to the default Twenty Nineteen theme
- Test again. If the problem is resolved, reactivate the parent theme first and test again, then the child theme, then other plugins one by one until the problem returns

Let me know the results of these tests and we can go from there.

[stuartm-2]

I just disabled most of the plugins as you said and i can see that a pop plugin is causing this issue. The plugins name is Popup Builder.
Any idea why this is messing with the Jquery datepicker?

[stuartm-2]

Also why the datepicker jquery function on Cred forms is extremely slow when picking date while on gravity forms instant?

[Christian Cox]

I'm not sure offhand why the Popup Builder plugin is causing a conflict. I installed it locally on my own site, and my datepicker is working okay, and it's quite fast to open. So there must be something else I don't understand. Where can I see the Form on the front-end of your site?

[stuartm-2]

If you click on menu New Job and then from the icons choose other job it will show up underneath. There is a field called video deadline date.

Thank you for your help

[Christian Cox]

It seems that the "Video" form on this page contains another datepicker, and this form is created by Gravity Forms. Is that correct? Is it possible that it only seems like the Popup Builder is causing the problem because that Gravity Form is in a popup?

[stuartm-2]

Yes, Print icon has gravity forms, i moved the the form from Other icon inside Video icon.
I just disabled gravity forms and the issue is between datepicker of toolset and Popup builder. It dosent make sense that it plays well with gravity forms and not toolset forms both are using Jquery datepicker.
Any suggestions?

[Christian Cox]

I can ask my 2nd tier team to investigate and figure out the conflict. I'll need to work with a clone of your site since I can't replicate this on my local environment. If it's okay, I will use the Duplicator plugin that's already installed to create that clone. Let me know if you approve.

[stuartm-2]

Yes of course. Please proceed and keep me updated.

Many thanks for your help

[Christian Cox]

Okay after a bit of digging around, I found out why I was unable to replicate this at first. It seems to be directly related to including a Form in any Popup. If I deactivate the "Register" popup, for example, the problem is solved. Once I realized this I was able to reproduce the problem on my own environment. So I have escalated this to my 2nd tier support team for more detailed investigation. I'll let you know what I find out.

[stuartm-2]

Thank you for the fast reply. I changed the register popup to a toggle function and the rest are still popup, the datepicker seems to be working but when i change the jquery to only let the user choose from today and onwards and submit the form, it dosent save the date on the backend.

Im using this simple line :

jQuery(document).ready(function($) {
    $(".testdate").datepicker({ minDate: 0 });
});

Any ideas?

[Christian Cox]

My 2nd tier team had this feedback:

The workaround for this is to add the following code after the theme footer.php

<script>
    wptDate.init("#cred_form_12345_1", {
        source: 'cred_form_ready_init'
    });
</script>

Replace 12345 with the Form's numeric ID. This will allow the datepicker to be triggered.

Then I would use the "option" method in your document ready callback to set the minDate, since you don't need to completely initialize the datepicker:

$(".testdate").datepicker( 'option', { minDate: 0 });