Home Components Support Pricing About Log in

Date Range Selector

BptDateRangeSelector

The BptDateRangeSelector component allows selecting a start and end date range from a dual calendar popup. It supports min/max constraints, custom formatting, hover preview, and auto-swaps dates when needed.

Date Range Selector Parameters

—

Current Configuration

📋

<BptDateRangeSelector @bind-StartDate="startDate"
                     @bind-EndDate="endDate"
                     OnStartDateSelected="HandleStart"
                     OnEndDateSelected="HandleEnd"
                     OnRangeSelected="HandleRangeSelected" />

@code {
    private DateTime? startDate;
    private DateTime? endDate;

    private void HandleStart(DateTime? date) { }
    private void HandleEnd(DateTime? date) { }

    private void HandleRangeSelected((DateTime? Start, DateTime? End) range)
    {
        Console.WriteLine($"Range: {range.Start} - {range.End}");
    }
}

Related learning

See the Date & Time Picker tutorial for a step-by-step walkthrough.