Form Field Date Range Picker

A pre-composed form field that wraps a BbDateRangePicker control with automatic label, helper text, and error message display. Inherits from FormFieldBase, which provides EditContext integration, auto-generated control IDs, ARIA attribute wiring, and validation error state management.

Default

A basic FormFieldDateRangePicker with a label, helper text, and two-way binding via @bind-Value. The component automatically generates a unique ID to associate the label with the picker for accessibility.
Select the date range for the report

Selected: None

With Constraints

Use MinDate, MaxDate, MinDays, and MaxDays to constrain the selectable range. Dates outside the allowed window are disabled, and the user cannot select fewer or more days than specified.
2–14 day range within the next 6 months

Auto Apply

Set AutoApply to true to commit the range as soon as both dates are picked — the popover closes without requiring the Apply button, which suits booking flows. Set ShowButtons to false to hide the Clear/Apply footer entirely (which implies auto-apply). Both parameters are forwarded to the inner date range picker.
Pick check-in and check-out — the range applies automatically

Custom Presets

Supply a custom list of DateRangeQuickPick entries via the Presets parameter. You can mix built-in presets (e.g. DateRangePreset.Last7Days) with custom entries created via DateRangeQuickPick.Custom().

With Error

Use ErrorText to manually set a validation error. Click Validate to trigger the error when no range is selected.

Disabled

Set Disabled to true to prevent user interaction. The picker trigger and label display with reduced opacity.
Contact admin to change the report period.