How to Add a Date Range Filter to a WordPress Table

Updated July 2026 • 7 min read • By Fahad Murtaza

A date range filter gives users a "From" and "To" date picker above a date column, so they can narrow a table down to entries that fall within a specific window. It is essential for tables that log transactions, submissions, orders, or any time-stamped activity. This guide covers the full setup in TableCrafter: which field types support it, how to configure the pickers, how the range is sent to the backend, and how to resolve the formatting issues that most commonly break it. WordPress powers 43% of all websites globally (W3Techs, July 2026), and TableCrafter bridges the gap between the data you collect and the tables your users need to see, no custom PHP, no dashboard access required for viewers, and no per-row limits on the free tier. The free version on WordPress.org supports CSV, JSON, Google Sheets, and Excel. Pro adds Gravity Forms, Airtable, Notion, WooCommerce, REST APIs,. Search and filter functionality increases dataset usability by 47% for non-technical end users accessing data tables (Nielsen Norman Group, 2023).

Which Field Types Support Date Range Filtering?

TableCrafter's date range filter works with columns mapped to these field types:

• Gravity Forms Date field (single date, datepicker or dropdowns sub-type)
• Gravity Forms Date/Time field (stores a datetime string)
• WooCommerce order date columns (mapped as post_date or date_created)
• REST API columns where the value is an ISO 8601 datetime string
• Custom columns where you manually set the column type to Date in the builder

Plain text columns that happen to contain date-formatted strings, typed in by hand rather than captured via a date picker, may or may not work depending on how consistently the data is formatted. If the stored values are inconsistent (some rows have "Jan 5 2025", others have "01/05/2025"), the range query will produce unreliable results. Standardize the data first, or use a text filter instead.

The column mapping you define here is stored as a JSON configuration in the WordPress database. You can export this configuration using the TableCrafter export tool and import it to another table or another site. This is useful when replicating a table layout across multiple pages or when migrating a table to a staging environment for testing before going live.

Step 1: How Do I Configure the Column as a Date Filter?

Open the table builder at TableCrafter → Tables → Edit. Click the funnel icon on your date column. In the Filter Settings panel:

TableCrafter re-fetches this data on each page load by default. If your data source updates infrequently and your site has significant traffic, enable the built-in caching option in the table's Performance tab. This stores the fetched data for a configurable number of minutes and serves it from WordPress transients, reducing API calls to the source and improving page load time for visitors.

1. Set Filter Type to Date
2. Enable the Range Mode toggle, this switches from a single date picker to a From / To pair
3. Set the Date Display Format to match how your users expect to enter dates (e.g. MM/DD/YYYY for US audiences)
4. Optionally set Minimum Date and Maximum Date to restrict the selectable range (useful for preventing users from querying before your data begins)
5. Click Save Column

Step 2: How Do I Add the Shortcode to Your Page?

Add a Shortcode block or Custom HTML block to the page where you want the table, then paste:

[tablecrafter id="1" filter="true"]

The filter="true" attribute is required — without it, no filter controls appear and the date range picker will not render. When filter="true" is active, TableCrafter reads your column configuration and generates the appropriate filter control for each column type: dropdown lists for Select fields, text search for string fields, and date range pickers for Date columns.

The date range pickers appear in the filter bar above the table, labeled with your column's display name. Both the From and To inputs are optional — leaving From empty means "from the earliest record in the dataset," and leaving To empty means "through the most recent record." Visitors can use one or both inputs to narrow the date range. If you want the default table view to start with a pre-filtered date range (for example, showing only the current month), that can be set via the filter_defaults shortcode parameter available in TableCrafter Pro.

How the Date Range Is Sent to the Backend?

When a user picks a From date and a To date, TableCrafter serializes both values and sends them in the AJAX request:

POST /wp-admin/admin-ajax.php
Action: gt_get_table_data

{
  "table_id": 1,
  "filters": {
    "submission_date": {
      "range": true,
      "from": "2025-01-01",
      "to": "2025-03-31"
    }
  }
}

Notice that the values sent to the server are always in YYYY-MM-DD format regardless of what the user saw in the picker. TableCrafter converts the user-facing display format to ISO 8601 before sending, this is the internal wire format and should not be changed. The server uses these ISO strings to construct a BETWEEN clause in SQL or the equivalent range filter for non-SQL sources.

The "To" date is treated as inclusive of the full day. Internally, TableCrafter appends 23:59:59 to the To value when querying datetime fields, so a user who picks March 31 as the end date will see entries from all day March 31, not just entries timestamped before midnight.

What Is Display Format vs. Storage Format: The Most Common Breakage?

The source of nearly every date range filter problem is a mismatch between the format in which dates are stored in the database and the format TableCrafter expects. Here is what each Gravity Forms date sub-type stores:

• Datepicker sub-type: Stores in the format configured in the Gravity Forms form settings, defaults to MM/DD/YYYY (e.g. 03/15/2025)
• Dropdowns sub-type: Stores in YYYY-MM-DD format regardless of display settings
• Date/Time fields: Store as Unix timestamp integers

To fix this, open the column's settings in the table builder, find the Storage Format field (separate from the Display Format), and set it to match what Gravity Forms actually writes to the database. TableCrafter uses the storage format to parse stored values before applying the range comparison.

How Does Testing the Date Range Filter Work?

After saving and embedding the shortcode, visit the frontend page and:

1. Pick a From date that you know is before your earliest entry, the full table should appear
2. Pick a To date set to yesterday, recent entries should disappear
3. Set both From and To to the same date, only entries from that exact date should appear
4. Clear the To date, the table should revert to showing everything from From through present

If step 3 returns zero results when you expect data, your storage format setting is likely wrong, revisit the column configuration and check the Storage Format dropdown.

The configuration you set here applies to every visitor who loads a page containing this table, regardless of whether they are logged in. Role-specific overrides for columns and rows are a separate layer and do not replace these global display settings. Apply global settings first, then add role restrictions as needed for tables that serve multiple user types.

How Does Restricting the Datepicker Calendar Work?

Two optional settings constrain which dates users can pick:

• Minimum Date: Disables calendar days before this date. Useful for datasets that start on a known date, prevents users from creating empty range queries against non-existent data.
• Maximum Date: Disables calendar days after this date. Set to Today (a dynamic value) to prevent users from querying future dates in a table that records past events.

Both settings accept static dates or the special value today (evaluated at render time on the server).

This step completes the connection between your data source and the TableCrafter table engine. Once saved, the plugin caches the connection credentials in the WordPress options table and uses them on every subsequent page load. If you update the source configuration later — for example, rotating an API key or changing a sheet URL — return to this step, enter the new value, and save again. The table updates immediately on next load without any shortcode changes.

What Are the Next Steps?

With date range filtering in place, users can isolate a time window and see exactly the rows they need. If your table also has categorical columns, status, type, region, consider combining the date range filter with dropdown filters so users can cross-reference time windows with categories in a single view. The guide on combining search and column filters explains how these filters work together using AND logic.