MudBlazor - Blazor Component Library

Basic Usage

SunMonTueWedThuFriSat

Inline

Dialog

Static

<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

Clearable

<MudStack>
    <MudDateRangePicker @bind-DateRange="@_dateRange" Margin="Margin.Dense" Editable="@_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; }
}

Date Range Picker

API

Basic Usage

Editable

Custom Format