jQuery Tablesorter From and To range not working - Cannot call method 'uiDatePicker'

Question

Error message:

Uncaught TypeError: Cannot call method 'uiDatepicker' of undefined.

HTML:

<input id="from" name="from" type="text" class="form-control input-md">
<input id="to" name="to" type="text" class="form-control input-md">

jQuery:

$("table") 
  .tablesorter({
  sortList: [[7,0]],
  theme : "bootstrap",
  widthFixed: true,
  headerTemplate : '{content} {icon}',
  widgets : [ "uitheme", "filter", "zebra" ],
  widgetOptions : {
    filter_reset : 'button.reset',
    filter_formatter : {

      7 : function($cell, indx){
        return $.tablesorter.filterFormatter.uiDatepicker( $cell, indx, {
        textFrom: 'from',
        textTo: 'to',
        changeMonth: true,
        changeYear : true
      });
      }
    }
  }
}) 
.tablesorterPager({
  container: $("#pager")
}); 

The reference of '7' before the uiDatePicker function is called references the 'date' column within the table.

Scripts (loaded within the footer, jQuery loaded in header):

{{ HTML::script('assets/vendor/jquery-ui/ui/minified/jquery-ui.min.js') }}
{{ HTML::style('assets/vendor/jquery-ui/themes/smoothness/jquery-ui.min.css') }}

Any advice / guidance as to why this isn't loading the uiDatepicker would be greatly appreciated!

Answer 1

I thought your question was about using the filterFormatter which modifies the inputs within the table, but since your date inputs are outside of the table, you'll need to use code that looks something like this (demo):

var $table = $('#alerts'),
    validDate = function (d) {
        return d instanceof Date && isFinite(d);
    },
    updateFilters = function () {
        var range = [],
            from = $('#from').datepicker('getDate'),
            to = $('#to').datepicker('getDate');
        from = validDate(from) ? from.getTime() : '';
        to = validDate(to) ? to.getTime() : '';
        range[4] = from ? (to ? from + ' - ' + to : '>=' + from) :
            (to ? '<=' + to : '');
        $.tablesorter.setFilters($table, range, true);
    };

$table.tablesorter({
    sortList: [[4, 0]],
    theme: "bootstrap",
    widthFixed: true,
    headerTemplate: '{content} {icon}',
    widgets: ["uitheme", "filter", "zebra"],
    widgetOptions: {
        filter_reset: 'button.reset',
        // hide column filters
        filter_columnFilters: false
    }
})
.tablesorterPager({
    container: $("#pager")
});

$("#from").datepicker({
    defaultDate: "+1w",
    dateFormat: 'd MM yy',
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#to").datepicker("option", "minDate", selectedDate);
        setTimeout(function(){ updateFilters(); }, 1);
    }
});
$("#to").datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd MM yy',
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function (selectedDate) {
        $("#from").datepicker("option", "maxDate", selectedDate);
        setTimeout(function(){ updateFilters(); }, 1);
    }
});