Tabulator custom date filter - date

Question

On table creation, I am trying to HIDE a row of the table if a date is in the past. Appreciate the help big time! Unfortunately I can't figure out how to do this, and really could use the help. There is also a filter that I apply based on user drop down. I am using tabulator package as well as moment for date library
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.9.3/dist/js/tabulator.min.js"></script>
<link href="https://unpkg.com/tabulator-tables#4.9.3/dist/css/materialize/tabulator_materialize.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<select id="filter-value">
<option value="">Select A Course</option>
<option value="">All</option>
<option value="Bronze">Bronze</option>
<option value="FirstAid">First Aid</option>
</select>
<script language="JavaScript">
//Define variables for input elements
var valueEl = document.getElementById("filter-value");
//Trigger setFilter function with correct parameters
function updateFilter() {
valueEl.disabled = false;
table.setFilter("course", "starts", valueEl.value);
// table.setFilter(filter, typeVal, valueEl.value);
// table.setFilter(filter, "like", valueEl.value);
}
//Update filters on value change
//document.getElementById("filter-field").addEventListener("change", updateFilter);
//document.getElementById("filter-type").addEventListener("change", updateFilter);
document.getElementById("filter-value").addEventListener("change", updateFilter);
//define some sample data
var tabledata = [
{ sortorder: "A100001", course: "Bronze Medallion with Emergency First Aid & CPR B Crash Course", price: "12", startdate: "Jan 21 2023" },
{ sortorder: "B300001", course: "Bronze Cross", price: "13", startdate: "May 12 1982", info: "Apr 4-May 2nd,<br /> 10am-4pm", pre: "" },
{ sortorder: "B300001", course: "Bronze Cross", price: "12", startdate: "Apr 12 1983", info: "", pre: "" },
{ sortorder: "C400001", course: "Christine Lobowski", price: "42", startdate: "May 22 1982", info: "", pre: "" },
{ sortorder: "A200001", course: "Bronze Medallion Recertification", price: "125", startdate: "Jan 8 1980", info: "", pre: "" },
{ sortorder: "D500001", course: "Margret Marmajuke", price: "16", startdate: "Jan 31 1999", info: "", pre: "" },
];
//create Tabulator on DOM element with id "example-table" RENDER THE TABLE
var table = new Tabulator("#example-table", {
height: 605, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitDataFill",
groupBy: "course",
resizableColumns: false,
responsiveLayout: "collapse",
responsiveLayoutCollapseStartOpen: false,
columns: [ //Define Table Columns
{ formatter: "responsiveCollapse", width: 30, minWidth: 30, hozAlign: "center", resizable: false, headerSort: false },
{ title: "Sort Order", field: "sortorder" },
{ title: "Course", field: "course", width: 350, responsive: 0, headerSort: false },
{ title: "Price", field: "price", hozAlign: "left", headerSort: false },
{ title: "Start Date", field: "startdate", hozAlign: "center", headerSort: false, sorter: "date", cssClass:"date" },
{ title: "Course Information", field: "info", formatter: "html", headerSort: false },
{ title: "Pre-requisites", field: "pre", headerSort: false },
],
initialSort: [
{ column: "startdate", dir: "asc" }, //sort by this first asc desc
{ column: "sortorder", dir: "asc" }, //sort by this second you will see this on screen
],
initialFilter: [
{ field: "startdate", type: ">", value: "" }
],
});

Answer 1

You're comparing strings. I think any string will be '> ""' (or the opposite, no string will be '> ""' - either way, you're not going to get what you want)
Convert those dates to moment()'s (prolly with a mutator at data insertion might be best) and then use a datetime formatter to display them how you want and you will be able to compare/filter/sort them as numbers properly