Date Range Picker

Provides the user with a simple way to select a date range.

API
Basic Usage
SunMonTueWedThuFriSat
SunMonTueWedThuFriSat
<MudStack AlignItems="AlignItems.Center" Style="width:650px; height:450px">
    <MudDateRangePicker PickerVariant="@_variant" @bind-DateRange="@_dateRange" Margin="Margin.Dense" />
    <MudSpacer />
    <MudToggleGroup T="PickerVariant" SelectionMode="SelectionMode.SingleSelection" Value="@_variant" ValueChanged="@OnValueChanged" 
                    Color="Color.Primary" CheckMark="true" FixedContent="true">
        <MudToggleItem Value="@(PickerVariant.Inline)" Text="Inline" />
        <MudToggleItem Value="@(PickerVariant.Dialog)" Text="Dialog" />
        <MudToggleItem Value="@(PickerVariant.Static)" Text="Static" />
    </MudToggleGroup>
</MudStack>

@code {
    private PickerVariant _variant = PickerVariant.Static;
    private DateRange _dateRange { get; set; }

    private void OnValueChanged(PickerVariant variant)
    {
        _dateRange = null;
        _variant = variant;
    }
}
Editable
<MudStack>
    <MudDateRangePicker @bind-DateRange="@_dateRange" Margin="Margin.Dense" ReadOnly="@(!_editable)" Clearable="@_clearable" 
                        PlaceholderStart="Start Date" PlaceholderEnd="End Date"/>

    <MudStack Row="true">
        <MudSwitch @bind-Value="_editable" Color="Color.Secondary">Editable</MudSwitch>
        <MudSwitch @bind-Value="_clearable" Color="Color.Secondary">Clearable</MudSwitch>
    </MudStack>
</MudStack>

@code {
    private bool _editable = true;
    private bool _clearable = true;
    private DateRange _dateRange { get; set; }
}
Custom Format
<MudStack>
    <MudDateRangePicker @bind-DateRange="@_dateRange" DateFormat="dddd, dd MMMM, yyyy" TitleDateFormat="MMMM dd" Margin="Margin.Dense" />
</MudStack>

@code {
    private DateRange _dateRange { get; set; }
}
Min/Max Date
Range: October 7 to November 7
<MudStack>
    <MudDateRangePicker @bind-DateRange="@_dateRange" MinDate="_minDate" MaxDate="@_maxDate" Margin="Margin.Dense" HelperText="@HelperText"/>
</MudStack>

@code {
    private DateRange _dateRange { get; set; }
    private DateTime _minDate = DateTime.Now.Date;
    private DateTime _maxDate = DateTime.Now.Date.AddMonths(1);

    private string HelperText => $"Range: {_minDate:M} to {_maxDate:M}";
}
Action Buttons
<MudStack>
    <MudDateRangePicker @ref="_picker" Label="With action buttons" @bind-DateRange="_dateRange" 
                        AutoClose="@_autoClose" PickerVariant="PickerVariant.Dialog">
        <PickerActions>
            <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
            <MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
            <MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">Ok</MudButton>
        </PickerActions>
    </MudDateRangePicker>
    <MudSwitch @bind-Value="_autoClose" Color="Color.Secondary">AutoClose</MudSwitch>
</MudStack>

@code {
    private MudDateRangePicker _picker;
    private DateRange _dateRange = new DateRange(DateTime.Now.Date, DateTime.Now.AddDays(5).Date);
    private bool _autoClose;
}
An unhandled error has occurred. Reload 🗙