How can I programmatically trigger a YADCF filter input using jQuery?

I have successfully managed to get YADCF working with daterangepicker in all but one respect: I cannot directly trigger the filtering action from the daterangepicker 'apply' button.

Click here for screenshot of daterangepicker with YADCF.

Everything works well if I set the date range and then manually click in the input field (.yadcf_daterangepicker), but I am unable to do this programatically using JS. Can anyone help please?

I have tried the following but it does not work:

$(".applyBtn.btn").click(function() {
    var e = jQuery.Event('keydown', { which: 13 });
    $(".yadcf_daterangepicker").trigger(e);
});

If I place an alert in there, it triggers, so I know that the 'apply' button click is being captured - it's transferring that click to the input field that I need help with please.

UPDATE: click here for a JSFiddle example

UPDATE 2: Following Daniel's help, I used the following code:

$(".applyBtn").click(function() {
    var start = $('.daterangepicker').find('input[name="daterangepicker_start"]').val();
    var end = $('.daterangepicker').find('input[name="daterangepicker_end"]').val();
    yadcf.exFilterColumn(table, [[1, start + ' - ' + end]]);
});

...which works perfectly on the updated fiddle, in that it populates the filter field and actions the filter, but using the same code on my real-world server-side script populates but does not action the filter. I am using all the very latest dependencies, exactly as per the fiddle, in the same order, and in all other respects, everything works as expected.

I spent hours hacking my complex application such that it loads nothing except the dependences on fiddle, but still no joy. I copied as much of my code as possible to a new fiddle (not server-side) and it worked. So I finally manually coded a static data array to my app and removed serverSide:true, processing:true and ajax:{} and suddenly everything works as expected.

Conclusion: something in the server-side JS or process is preventing yadcf.exFilterColumn() working as expected when inside a click wrapper. Any ideass?

UPDATE 3: Following Daniel's further help, I used the following code, which does the trick:

$(".applyBtn").click(function() {
    var start = $('.daterangepicker').find('input[name="daterangepicker_start"]').val();
    var end = $('.daterangepicker').find('input[name="daterangepicker_end"]').val();
    //notice the third parameter *true* in exFilterColumn
    yadcf.exFilterColumn(table, [[1, start + ' - ' + end]], true); 
});

Solution

As to this specific question on how to trigger yadcf programmatically - use the yadcf.exFilterColumn api you can use the yadcf.exGetColumnFilterVal too.

In your example:

$(".applyBtn").click(function() {
    var e = jQuery.Event('keydown', {
      which: 13
    })
    yadcf.exFilterColumn(table, [[1, yadcf.exGetColumnFilterVal(table,1)]]);  
  });

But I recommend to use the range_date filter which can be integrated with jquery-ui / bootstrap-datetimepicker (https://github.com/Eonasdan/bootstrap-datetimepicker) / bootstrap-datepicker (https://github.com/uxsolutions/bootstrap-datepicker)

read docs for more.

Update,

You must add a third parameter true to exFilterColumn

yadcf.exFilterColumn(table, [[1, yadcf.exGetColumnFilterVal(table,1)]], true);

Hopefully will update the docs regarding this one...