sufi-blazor/docs/components/forms/SbDateRangePicker.md

SbDateRangePicker

A dual-calendar date range picker with preset options, supporting multiple calendar systems.

Parameters

Parameter	Type	Default	Description
Value	SbDateRange?	null	The selected date range (two-way bindable)
ValueChanged	EventCallback<SbDateRange?>	-	Callback when range changes
CalendarSystem	SbCalendarSystem?	null	Calendar system; when null, uses current UI culture
Min	DateOnly?	null	Minimum selectable date
Max	DateOnly?	null	Maximum selectable date
DisableWeekends	bool	false	When true, disables weekend days according to the current calendar
IsDateDisabled	Func<DateOnly, bool>?	null	Function to disable specific dates
Format	string?	null	Date format string
Placeholder	string?	null	Placeholder when no range selected; when null, uses localized default
Clearable	bool	true	Whether to show clear button
Disabled	bool	false	Whether the picker is disabled
ShowPresets	bool	true	Whether to show quick preset options
Id	string?	null	Element ID
Label	string?	null	Label text displayed above the picker
Required	bool	false	Whether the field is required
Class	string?	null	Additional CSS classes
Style	string?	null	Inline styles

Events

Event	Type	Description
ValueChanged	EventCallback<SbDateRange?>	Fired when the date range changes

SbDateRange Type

public record SbDateRange(DateOnly? Start, DateOnly? End);

CSS Classes

• sb-daterangepicker - Base class
• sb-daterangepicker__label - Label element
• sb-daterangepicker__required - Required asterisk
• sb-daterangepicker__trigger - Button that opens the picker
• sb-daterangepicker__trigger--disabled - Disabled trigger
• sb-daterangepicker__value - Selected range display
• sb-daterangepicker__placeholder - Placeholder text
• sb-daterangepicker__clear - Clear button
• sb-daterangepicker__icon - Calendar icon
• sb-daterangepicker__dropdown - Dropdown panel
• sb-daterangepicker__dropdown--flip-up - Dropdown flips upward
• sb-daterangepicker__calendars - Calendars container
• sb-daterangepicker__calendar - Individual calendar
• sb-daterangepicker__header - Calendar header
• sb-daterangepicker__nav-btn - Navigation buttons
• sb-daterangepicker__title - Month/year title
• sb-daterangepicker__day-names - Day names row
• sb-daterangepicker__days - Days grid
• sb-daterangepicker__day - Individual day button
• sb-daterangepicker__day--start - Range start date
• sb-daterangepicker__day--end - Range end date
• sb-daterangepicker__day--in-range - Days within range
• sb-daterangepicker__day--preview - Hover preview
• sb-daterangepicker__day--today - Today's date
• sb-daterangepicker__day--disabled - Disabled date
• sb-daterangepicker__presets - Preset buttons container
• sb-daterangepicker__preset - Preset button
• sb-daterangepicker__footer - Footer with actions
• sb-daterangepicker__selection - Selection summary text
• sb-daterangepicker__cancel - Cancel button
• sb-daterangepicker__apply - Apply button

Preset Options

When ShowPresets is true, the following presets are available:

• Today
• Last 7 days
• Last 30 days
• Last 90 days
• This month
• Last month

Accessibility

• Navigation buttons have aria-labels
• Clear button has aria-label
• Supports RTL for Persian/Arabic calendars

Examples

Basic Usage

<SbDateRangePicker @bind-Value="dateRange" Label="Date Range" />

Without Presets

<SbDateRangePicker @bind-Value="customRange" 
                   Label="Custom Range"
                   ShowPresets="false" />

With Constraints

<SbDateRangePicker @bind-Value="bookingRange" 
                   Label="Booking Period"
                   Min="@DateOnly.FromDateTime(DateTime.Today)"
                   Max="@DateOnly.FromDateTime(DateTime.Today.AddYears(1))" />

Persian Calendar

<SbDateRangePicker @bind-Value="persianRange" 
                   CalendarSystem="SbCalendarSystem.Persian"
                   Label="بازه تاریخ" />

Disable Weekends

<SbDateRangePicker @bind-Value="workingDays" 
                   Label="Working Days"
                   IsDateDisabled="d => d.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday" />

Custom Format

<SbDateRangePicker @bind-Value="reportRange" 
                   Label="Report Period"
                   Format="MMM d, yyyy" />

Required Field

<SbDateRangePicker @bind-Value="requiredRange" 
                   Label="Period (required)"
                   Required="true"
                   Clearable="false" />