Add DateRangePicker component with segmented entry and calendar popup

Implements the DateRangePicker design: a DateRangeField that looks like a
single input but splits each date into DD/MM/YYYY part inputs (ordered by
the new common.time.dateformat_hyphenated), and a DateRangeCalendar popup
with a preset column (today, yesterday, last 7/30 days, this/last month,
this year), anchor-style range picking with an outlined/filled/muted range
track, and a Cancel / Clear / Select footer.

Typing fills each part's placeholder from the right (YYYY -> YY19 -> 1987),
auto-advances between parts, and Backspace/Delete reverts the active part.
The committed value lives in hidden ISO {prefix}-min/{prefix}-max inputs --
the same contract as DateRangeFilter, so filter_bar.js needs no changes.

As a tryout, the Purchased filter in PurchaseFilterBar now uses the
DateRangePicker; Refunded keeps the native-date DateRangeFilter, and the
native-path e2e tests were repointed at it.

Includes unit tests for the component family and the filter-bar
integration, plus Playwright e2e tests for segment entry, calendar
picking, presets, and footer actions.

https://claude.ai/code/session_017b75KJAu4kNNpZPu9NAPBM

common/components/filters.py

@@ -6,6 +6,7 @@ from django.db import models
 from django.utils.safestring import SafeText, mark_safe
 
 from common.components.core import Component
+from common.components.date_range_picker import DateRangePicker
 from common.components.primitives import Checkbox, Div, Input, Label, Radio, Span
 from common.components.search_select import (
     DEFAULT_PREFETCH,
@@ -1289,7 +1290,7 @@ def PurchaseFilterBar(
                 ),
                 _filter_field(
                     "Purchased",
-                    DateRangeFilter(
+                    DateRangePicker(
                         label="Purchased",
                         input_name_prefix="filter-date-purchased",
                         min_value=date_purchased_min,