日期範圍篩選器

根據不同欄位中的兩個日期篩選表格

• 作者：guillimon

根據特定日期範圍篩選欄位。請注意，您可能需要變更輸入的 ID 以及開始和結束日期所在的欄位。

使用

這個外掛程式可以用多種不同的方式取得和使用。

瀏覽器

這個外掛程式可在 DataTables CDN 上取得

然後，外掛程式會自動將其自身註冊到全域 DataTables 實例。如果您使用 AMD 載入器 (例如 Require.js)，也可以使用此檔案。

請注意，如果您使用多個外掛程式，將外掛程式組合成單一檔案並將其託管在您自己的伺服器上，而不是多次向 DataTables CDN 發出請求，在效能方面可能會更有利。

NPM

這些外掛程式都可以在 NPM 上取得 (也可以與 Yarn 或任何其他 Javascript 套件管理員一起使用)，作為 datatables.net-plugins 套件的一部分。要使用此外掛程式，請先安裝外掛程式套件

npm install datatables.net-plugins

ES 模組

然後，如果您使用 ES 模組，請匯入 datatables.net、您需要的任何其他 DataTables 擴充功能，以及此外掛程式

import DataTable from 'datatables.net';
import 'datatables.net-plugins/filtering/row-based/range_dates.mjs';

CommonJS

如果您使用 Node 的 CommonJS 載入器 (例如，使用舊版本的 Webpack 或非模組 Node 程式碼)，請使用以下方法 require 此外掛程式

var $ = require('jquery');
var DataTable = require('datatables.net');
require('datatables.net-plugins/filtering/row-based/range_dates.js');

範例

$(document).ready(function() {
      var table = $('#example').DataTable();

      // Add event listeners to the two range filtering inputs
      $('#min').keyup( function() { table.draw(); } );
      $('#max').keyup( function() { table.draw(); } );
  } );

版本控制

如果您有任何關於如何改進此外掛程式的想法，或發現任何錯誤，它可以在 GitHub 上取得，非常歡迎提出 Pull Request！

• 此外掛程式：range_dates.js
• 完整 DataTables 外掛程式儲存庫：DataTables/Plugins