date - 制表符自定义日期过滤器
问题描述
在创建表时,如果日期是过去,我会尝试隐藏表的一行。感谢大时代的帮助!不幸的是,我无法弄清楚如何做到这一点,并且真的可以使用帮助。还有一个我根据用户下拉应用的过滤器。我正在使用制表符包以及日期库的时刻
<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: "" }
],
});
解决方案
推荐阅读
- jmeter - 如何在 jmeter 中为多个采样器使用吞吐量控制器?
- javascript - Kendo ASP.net MVC 网格编辑器弹出窗口不起作用
- sql - 如果表数据不为空,则创建表数据
- c++ - 如何将名称中带有点的键添加到 json 文件中
- visual-studio-code - 引号在 Pylance 中触发 Intellisense
- php - 遍历一个关联数组后跟一个字符串模式?
- caddy - Caddyv2 Caddyfile TLS 配置
- soap - openapi oneOf 的 WSDL 等效项是什么?
- string - 如何防止 Google Apps 脚本将现有字符串(日期、持续时间等)更改为 Google 表格中的时间戳
- r - 为什么尝试在 Linux 上运行 R 脚本时出现 exec 格式错误?