Choosing multiple date ranges?

[mkopara]

Any chance of a future update that would allow user to select multiple date range from a single instance?

[jdtcn]

Hi,

The picker already has enough extension points to do multiple range selection, the code should look like this:

<DateRangePicker 
    CustomDateFunction="CustomRangeHighlight" 
    OnRangeSelect="RangeSelect" 
    DaysEnabledFunction="DaysEnabledFunction" />

@code {
    List<DateRange> Ranges { get; set; } = new();

    private string CustomRangeHighlight(DateTimeOffset dt)
    {
        var range = Ranges.FirstOrDefault(r => dt >= r.Start && dt <= r.End);
        if (range == null) return string.Empty;

        if (range.Start.Date == dt.Date) return "active in-range start-date";
        else if (range.End.Date == dt.Date) return "active in-range end-date";
        return "in-range";
    }

    public bool DaysEnabledFunction(DateTimeOffset dt)
    {
        return !Ranges.Any(r => dt >= r.Start && dt <= r.End);
    }

    private void RangeSelect(DateRange range)
    {
        Ranges.Add(range);
    }
}

And the result will be like this: