Custom Datepicker (Datedropper.js) with Channel Form Grid & Date Fields

Question

I have run into an issue I cannot figure out.

The situation is I have a Channel Form that has a bunch of Grid field types on with a date field. The issue is I would like to use this (datedropper) JS datepicker for each date field inside the grid. I am able to get it to fire if the page loads with an existing row but if I click to add a row the date dropdown will not fire.

I have tried every variation of include_assets/include_jquery/datepicker in the parameters.

Here is the sample code:

<link href="{path='css/_ee_channel_form_css'}" type="text/css" rel="stylesheet" media="screen">

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

{exp:channel:form channel="members" author_id="CURRENT_USER" limit="1" return="profile/{segment_2}" url_title="id{snp_member_username}"}

{field:standard_grid_field_with_date_inside}

{/exp:channel:form}

<script src="assets/script/datedropper.pro.min.js"></script>
<script>
  $(document).ready(function(){        
    $( "input[rel='date-picker']" ).addClass("datedropper");
    $( "input[rel='date-picker']" ).addClass("datedropper-init");
    $( "input[rel='date-picker']" ).attr("data-dd-theme", "tallypop-datedropper"); 
    $( "input[rel='date-picker']" ).attr("data-dd-event-selector", "click"); 
  });
</script>
<script>
$(document).ready(function(){         
  $('.datedropper').dateDropper({
    eventSelector:'click',
    large: true
  });
});
</script>

Any direction would be huge!

EDIT: I should've given my EE build. Here it is: 5.2.2

Answer 1

Channel Formloads it's own Jquery so you loading it as well may cause conflicts.

You can disable it from loading and use your own version, see https://docs.expressionengine.com/latest/channels/channel-form/overview.html#include_jquery

Answer 2

Thanks to the help of Robin & Jordan part of the EE support team this is solved. I was told that there's a really really long story about how the native datepicker works, and it boiled down to me needing to not disable it in the form settings - but then disable the behavior via the js. Hope this helps.

Check out the code with Jordan's notes:

    $(document).ready(function() {  
    // Bind the window load event once the document is ready
    // This makes sure the code below is executed last, after all other document.readys
    // so that the old datepicker events are removed after they have been added.
    $(window).bind("load", function() {

        console.log('Init');

        // Remove the old datepicker events from the input
        $('input[rel="date-picker"]').each(function(index, el) {
            $(el).off()
        });

         // Add a datedropper to each date grid field
        // This is called when the page loads and when new items are added
        Grid.bind("date", "display", function(newField)
        {
            // Remove any events just in case
            $(newField).off()

            // Get the input that is inside of the new grid item
            var input = $('input', newField);
            // Init the datepicker
            input.dateDropper();

            console.log('Display Grid Field', input);
        });

    });
});