Date Range Picker

Basic Usage

شنبهیکشنبهدوشنبهسه‌شنبهچهارشنبهپنجشنبهجمعه

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

<MudStack>
    <MudDateRangePicker PickerVariant="PickerVariant.Inline" Modal="false" />
</MudStack>

Editable

Range

Editable

Clearable

<MudStack>
    <MudDateRangePicker @bind-DateRange="@_dateRange" Margin="Margin.Dense" ReadOnly="@(!_editable)" Clearable="@_clearable" 
                        PlaceholderStart="Start Date" PlaceholderEnd="End Date" Label="Range"/>

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

API

Basic Usage

Inline Non-modal

Editable