Using YADCF with JQuery UI with "changeMonth: true, changeYear: true"

Question

a bit of assistance please.

Using YADCF with JQuery UI, and trying to include the functions: changeMonth: true, changeYear: true

In the example for JQueryUI this is what they use:

$( "#yourID" ).datepicker({
      changeMonth: true,
      changeYear: true,

With YADCF I am not sure how to add it. This is what my code looks like now:

.yadcf([
                    {column_number: 0, filter_type: "range_date", 
                    datepicker_type: 'jquery-ui', 
                    changeMonth: true,
      changeYear: true,
     filter_container_id: "external_filter_container"}

I have also tried inserting "changeMonth: true, changeYear: true," into

var datepickerDefaults = {

and separately targeting the YADCF id with

 $( "#YADCFID" ).datepicker({
          changeMonth: true,
          changeYear: true,

So far no luck, any suggestions?

UPDATE: Although the form works the sorting does not.

Current Script:

    var oTable;     
        $(document).ready(function () {
            'use strict';           
            $('#example').dataTable({
            "columnDefs": [{ "orderable": false, "targets": 0 }],
            "order": [],
              dom: '<"pos1"B><"pos2"li><"pos3"f>tp',
              buttons: ['copy', 'csv', 'excel', 'pdf', 'print']
          }).yadcf([
                {column_number: 0, filter_type: "range_date",             
 filter_container_id: "external_filter_container",
    filter_plugin_options: {
        changeMonth: true,
        changeYear: true,
        dateFormat: "dd/mm/yy"
    }
    }
            ]);
        SyntaxHighlighter.all();
    });  

and the html:

  <tr>
      <td>21/06/2017</td>     
  </tr>
<tr class="t-two">
    <td>21/06/2017</td> 
</tr>

The search result returns wrong months i.e. 02/02/2017 when I select range 01/06/2017 - 02/06/2017

Answer 1

You should use the filter_plugin_options attribute for that

Like this:

.yadcf([
    {
        column_number: 0,
        filter_type: "range_date", 
        //datepicker_type: 'jquery-ui', this one is redundant because its the default value anyway
        filter_container_id: "external_filter_container",
        filter_plugin_options: {
            changeMonth: true,
            changeYear: true
        }
    }
])