DateRangeInput

Collects a date range in a calendar popover, with the days between the bounds highlighted as you hover.

Open in Storybook

The dispatcher picks it over SchemaRangeInput when both bounds of a range field are dates — which is what makes it the default input for date filters in a list.

Pick a range in the calendar below: the first click sets the lower bound, the second the upper one, and hovering previews everything in between.

Example

<DateRangeInput source="placed_at" label="Placed between" />

Props

On top of locales the component accepts the shared input props.

Name	Type	Default	Description
source (required)	string	—	Name of the field in the form record; the value is {lower, upper}
locales	string	navigator.language	Locale used to render the calendar and format the value
label	string | ReactElement | false	label from the schema	false hides the label
helperText	string | ReactElement | false	helpText from the schema	Text under the input

The first click sets the lower bound, the second the upper one; a reset button in the popover clears both. Either bound may stay empty — an open range is a valid value.

Schema mapping

type: "object" with format: "range" whose properties are both dates:

{"name": "placed_at", "type": "object", "format": "range",
 "properties": [
   {"name": "lower", "type": "string", "format": "date"},
   {"name": "upper", "type": "string", "format": "date"}
 ]}

Python

A RangeFilter over a date field emits the range format, which is how a list gets a “placed between” filter:

from django_filters import rest_framework as filters


class OrderFilterSet(filters.FilterSet):
    placed_at = filters.DateFromToRangeFilter()

    class Meta:
        model = Order
        fields = ["placed_at", "status"]

Ruby

See also

• Filtering and searching — declaring filters on the Python side
• SchemaRangeInput — the generic lower/upper pair
• DateInput and DateTimeInput — a single date