Date Range Selector

IsabyteDateRangeSelector

The IsabyteDateRangeSelector 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

📋

<IsabyteDateRangeSelector @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()
    {
        Console.WriteLine($"Range: {startDate} - {endDate}");
    }
}

Related learning

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