Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #581339

    If I insert a text input field in a code block, how would I invoke the jQuery datepicker for that field?

    Something like:
    <input name=”mydate” class=”avia_datepicker”>
    <script>
    jQuery(‘.avia_datepicker’).datepicker({
    //options
    });
    </script>

    #581372

    Hey gooseflight!

    Please do explain us what you need to do, so we can explain the process
    From what you described, really really hard to understand.

    Thanks a lot

    Cheers!
    Basilis

    #581516

    Hi Basilis and thanks,

    I think I found an answer to my question here:

    https://kriesi.at/support/topic/custom-jquery/

    #582024

    Hi,

    Great, thanks for sharing. Please let us know if you should need any more help on the topic.

    Thanks,
    Rikard

    #582190

    Thanks Rikard, I need more help!

    As a test I have enqueued a script as below. It is called correctly because the button click outputs to console. The datepicker part of the script doesn’t work. GIven that jQuery UI is already enqueued I thought it would be fine. The error is “datepicker is not a function”.

    jQuery(‘input[name=”go”]’).live(‘click’, function() {
    console.log(‘here’);
    });

    jQuery(function() {
    jQuery(‘#datepicker’).datepicker(); // jQuery UI
    });

    #583113

    Hey!

    It’s not going to work because the “datepicker” is not a valid function unless you install the jQuery UI (https://jqueryui.com/datepicker/). Maybe this plugin will help: https://wordpress.org/plugins/jquery-ui-widgets/

    Cheers!
    Ismael

    #583234

    Hi,
    Thanks.
    I read that you already enqueued jQuery UI here https://kriesi.at/support/topic/custom-jquery/#post-387983
    How does the enfold contact form datepicker work? How can I call that?

    #585262

    Hi!

    To answer your question…

    “How does the enfold contact form datepicker work? “

    When you add the date picker from enfold ALB > contact form

    And a user select the date and send the message you will receive the info in your email along with the date they have choosen.

    How can I call that?

    You can reference it using custom jQuery please let us know what is the purpose of calling the datepicker what you are trying to achieve?

    If the date picker is not working for you please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you better.

    Regards,
    Vinay Kashyap

    #585294

    Thanks but that wasn’t really my question. I know how to implement the contact form datepicker.

    In response to an earlier question the recommendation was to install the jQuery UI. So when asking how does the Enfold datepicker work? I was meaning how does it work if the jQuery UI isn’t already installed?

    I commented that in another post it was stated that the jQuery UI was already enqueued and since the Enfold contact form can display a jQuery datepicker that must be the case.

    So what I was asking was: if the Enfold contact form is capable of displaying a datepicker why does this not work?
    jQuery(function() {
    jQuery(‘#datepicker’).datepicker(); // jQuery UI
    });

    What I am trying to do is display a jQuery datepicker form a custom form.

    #585322

    #586606

    Hi!

    I commented that in another post it was stated that the jQuery UI was already enqueued and since the Enfold contact form can display a jQuery datepicker that must be the case.

    Unfortunately, that’s not the case. The jquery ui for datepicker in the theme will be loaded if a contact form contains a date picker element. You need to register the jquery ui script manually.

    add_action('init', 'ava_load_jquery_datepicker');
    function ava_load_jquery_datepicker() {
    	wp_enqueue_script('jquery-ui-datepicker', array('jquery'));
    }
    

    Best regards,
    Ismael

    #586701

    Yes! Working now. Just apply avia_datepicker class to format.

    Thank you :)

    #586736

    Actually that’s not quite right. Looks like Enfold does some conditional stylesheet loading as well.

    Seems easiest way to do this is to add an Enfold contact form, let it handle the jQuery/CSS loading and then remove it in your own custom javascript, e.g.:

    jQuery(function() {
    jQuery(‘form[data-avia-form-id=”1″]’).remove();
    });

    #589592

    Hi!

    Nice. Glad you found a workaround. :)

    Cheers!
    Ismael

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.