Use Flatpickr in a custom “html+php” form inside elemntor page

  • Resolved pizzapie79

    (@pizzapie79)


    4 years, 10 months ago

    Hi, I have a custom “html + php” form inside my elemntor pages, and I have a date field in this form so I’d like to use Elementor flatpickr since it’s already included on all my website pages.

    So, I’ve added this simple script in my js field, but it’s not working 🙁
    $(“#booking-form-datepicker”).flatpickr();

    Am I missing something? Can someone please help me?
    Thanks in advance!

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter pizzapie79

    (@pizzapie79)

    4 years, 10 months ago

    Just a quick update: now it’s working when my form is inside a page, but it’s NOT working when my form is inside an Elementor Popup. Am I missing something? Maybe I need to fire my $(“.booking-form-datepicker”).flatpickr(); after popup open event?

    • This reply was modified 4 years, 10 months ago by pizzapie79.
    Donna Cavalier

    (@cavalierlife)

    4 years, 10 months ago

    I’d say it’s very likely a timing thing as to which gets fired first, but I don’t know how to tell you to fix it. Sounds like you are on the right track though.

    Thread Starter pizzapie79

    (@pizzapie79)

    4 years, 10 months ago

    I’ve found this topic on github: https://github.com/elementor/elementor/issues/8057
    It seems I’ve to call flatpickr when my popup is showing, like this:

    
jQuery(window).load(function() {
  jQuery.each( elementorFrontend.documentsManager.documents, ( id, document ) => {
    if ( document.getModal ) { // It's a popup document
      document.getModal().on( 'show', () => {
        $(".booking-form-datepicker").flatpickr();
      } );
    }
  });
});

    It’s working, but I’d like to know how to make it work for a specific popup instead of every popup… any idea?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Use Flatpickr in a custom “html+php” form inside elemntor page’ is closed to new replies.

Tags