Date-range filter

Filter data between two calendar dates.

A date-range filter accepts a start date, an end date, or both. Each date uses the YYYY-MM-DD format.

The URL value uses <from>..<to>. For example, 2026-08-01..2026-08-31 is a closed range. 2026-08-01.. has no end, and ..2026-08-31 has no start. Backlit ignores an invalid range or a range in reverse order.

API

filters.dateRange(name: string): DateRangeFilterBuilder

Method	Input	Result
`setLabel`	`string`	Sets the filter-control label.

Basic date-range filter

import {
  defineFilters,
  defineResource,
  filters,
  section,
} from '@backlit/sdk'

const orders = defineResource('orders', [])
const orderFilters = defineFilters([
  filters.dateRange('placed'),
])

orders.view(
  'list',
  { filters: orderFilters },
  (_ctx, view) =>
    section('Orders').setFilters(view.state.filters)
)

export default orders

{
  "kind": "success",
  "status": 200,
  "node": {
    "kind": "view",
    "resource": "orders",
    "name": "list",
    "slots": {
      "content": [
        {
          "kind": "section",
          "title": "Orders",
          "slots": {
            "content": [],
            "filters": {
              "kind": "filters",
              "resource": "orders",
              "view": "list",
              "keyword": "f",
              "definesResult": true,
              "dependsOnResult": false,
              "filters": [
                {
                  "kind": "date-range",
                  "name": "placed",
                  "label": ""
                }
              ]
            }
          }
        }
      ]
    }
  }
}