1

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

2 Answers 2

0

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

1
  • Thanks for the comment Bluedreamer. I have definitely tried disabling jQuery in the parameters as well as removing my own jQuery load and using EE's jQuery. Both ways the issue still exists. I can get the EE datepicker to fire both ways. The custom datedropper fires on existing rows but if I add a new row the custom dropper will not fire. Jun 3, 2019 at 17:34
0

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);
        });

    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.