Mottie Tablesorter Custom Filter on Date Column

Question

I am looking to remove the day of the week when sorting a column using Mottie Tablesorter v2.31.

The value of the cells are as follows: Friday, 9/15/2023 at 7:00AM.

Here is what I have so far based on the documents in Mottie but nothing is happening.

I have also attempted to add in things such as alerts to see if it is even hit, and I get nothing.

 $(function () {
    $("table").tablesorter({
        theme: "bootstrap",

        widthFixed: true,

        // widget code contained in the jquery.tablesorter.widgets.js file
        // use the zebra stripe widget if you plan on hiding any rows (filter widget)
        // the uitheme widget is NOT REQUIRED!
        widgets: ["filter", "columns", "zebra", "filter_functions"],

        widgetOptions: {
            // using the default zebra striping class name, so it actually isn't included in the theme variable above
            // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
            zebra: ["even", "odd"],

            // class names added to columns when sorted
            columns: ["primary", "secondary", "tertiary"],

            // reset filters button
            filter_reset: ".reset",

            // extra css class name (string or array) added to the filter element (input or select)
            filter_cssFilter: [
                'form-control',
                'form-control',
                'form-control', // select needs custom class names :(
                'form-control',
                'form-control',
                'form-control'
            ],

            filter_functions: {
                // function(e, n, f, i, $r, c, data) {} <- current parameters
                5: function (e, n, f, i, $r, c, data) {
                    // Get the date value from the cell
                    var date = $(n).text().trim();
                    // Remove the day of the week from the date string
                    var formattedDate = date.substr(date.indexOf(",") + 2);
                    // Return the formatted date for filtering
                    return formattedDate;
                } // planned change (version undetermined)
            }

        }
    })

});

Answer 1

The way the tablesorter filters is found here

You need to perform a test that will return true if you want to show the row or false if you want to hide it.

I have changed some of the parameter names so they make more sense

We take the normalised (lowercased) value and remove the dayname, that way you can search for a and get AM instead of ...day - that, and the ignoring of any entering of dayname is what the script does. That does mean that if you DO enter a dayname, nothing is shown so I still do not quite get what you want. If you want to ignore that users enter daynames, then we also need to remove that from the normalised string while they enter it. I would be a bit confused by that as a user.

In any case the script below is a great start.

const formatDateString = dateString => {
  let [_, dayName, mm, dd, yyyy, time] = dateString.match(/(\w+),\s*(\d{1,2})\/(\d{1,2})\/(\d{4})\s+at\s+(\d{1,2}:\d{2}[APMapm]{2})/);
  return `${mm}/${dd}/${yyyy} ${time}`; // strip dayname
};

$(function() {
  $("table").tablesorter({
    theme: "bootstrap",

    widthFixed: true,

    // widget code contained in the jquery.tablesorter.widgets.js file
    // use the zebra stripe widget if you plan on hiding any rows (filter widget)
    // the uitheme widget is NOT REQUIRED!
    widgets: ["filter", "columns", "zebra", "filter_functions"],

    widgetOptions: {
      // using the default zebra striping class name, so it actually isn't included in the theme variable above
      // this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
      zebra: ["even", "odd"],

      // class names added to columns when sorted
      columns: ["primary", "secondary", "tertiary"],

      // reset filters button
      filter_reset: ".reset",

      // extra css class name (string or array) added to the filter element (input or select)
      filter_cssFilter: [
        'form-control',
        'form-control',
        'form-control', // select needs custom class names :(
        'form-control',
        'form-control',
        'form-control'
      ],

      filter_functions: {
        // the number is the 0-based cell number, so 1 is cell number 2
        1: function(entry, normalised, input, i, $row, c, data) { console.log(normalised)
          // Get the date value from the cell
          // Remove the dayname the date string
          let dateString = formatDateString(normalised.trim());
          // Return true if the formatted date includes what is typed
          return input === "" || dateString.includes(input); 
        } 
      }

    }
  })

});

<!DOCTYPE html>
<html>

<head>
  <title>Sample Table</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
 <link rel="stylesheet" type="text/css" href="https://mottie.github.io/tablesorter/css/theme.bootstrap.css">
      <link rel="stylesheet" type="text/css" href="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css">
      <script type="text/javascript" src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.js"></script>
      <script type="text/javascript" src="https://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
      <script type="text/javascript" src="https://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
</head>

<body>

  <table class="tablesorter">
    <thead>
      <tr>
        <th>ID</th>
        <th>Date</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>Monday, 9/4/2023 at 7:00AM</td>
        <td>Event 1</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Tuesday, 9/5/2023 at 8:00AM</td>
        <td>Event 2</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Wednesday, 9/6/2023 at 9:00AM</td>
        <td>Event 3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>Thursday, 9/7/2023 at 10:00AM</td>
        <td>Event 4</td>
      </tr>
      <tr>
        <td>5</td>
        <td>Friday, 9/8/2023 at 7:00AM</td>
        <td>Event 5</td>
      </tr>
      <tr>
        <td>6</td>
        <td>Saturday, 9/9/2023 at 12:00PM</td>
        <td>Event 6</td>
      </tr>
      <tr>
        <td>7</td>
        <td>Sunday, 9/10/2023 at 1:00PM</td>
        <td>Event 7</td>
      </tr>
      <tr>
        <td>8</td>
        <td>Monday, 9/11/2023 at 7:00AM</td>
        <td>Event 8</td>
      </tr>
      <tr>
        <td>9</td>
        <td>Tuesday, 9/12/2023 at 3:00PM</td>
        <td>Event 9</td>
      </tr>
      <tr>
        <td>10</td>
        <td>Wednesday, 9/13/2023 at 7:00AM</td>
        <td>Event 10</td>
      </tr>
      <tr>
        <td>11</td>
        <td>Wednesday, 9/13/2023 at 9:00AM</td>
        <td>Event 11</td>
      </tr>
      <tr>
        <td>12</td>
        <td>Wednesday, 9/13/2023 at 12:00PM</td>
        <td>Event 12</td>
      </tr>
      <tr>
        <td>13</td>
        <td>Thursday, 9/14/2023 at 2:00PM</td>
        <td>Event 13</td>
      </tr>
      <tr>
        <td>14</td>
        <td>Friday, 9/15/2023 at 7:00AM</td>
        <td>Event 14</td>
      </tr>
      <tr>
        <td>15</td>
        <td>Saturday, 9/16/2023 at 4:00PM</td>
        <td>Event 15</td>
      </tr>
    </tbody>
  </table>

</body>

</html>