Home Components Support Pricing About Log in

Date Range Selector

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

Format: yyyy-MM-dd

Start Placeholder

End Placeholder

Use Min Date

Use Max Date

First Day of Week: Monday

Render Style: FullWidth

Format Culture: Default

Disabled

—

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}");
    }
}