Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Date Picker

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

See Date Picker API for parameter documentation.

Basic Usage

Note: Always use the two-way binding @bind-Date to bind to a field of type DateTime?

No header

For custom cultures

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Basic example" @bind-Date="date" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Basic example (editable)" Editable="true" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Only Calendar" @bind-Date="date" DisableToolbar="true" HelperText="No header" />
    </MudItem>
</MudGrid>
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Date Format" @bind-Date="date" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Show week number" ShowWeekNumbers="true" @bind-Date="date" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Display two months" DisplayMonths="2" TitleDateFormat="dddd, dd MMMM" @bind-Date="date" />
    </MudItem>
</MudGrid>
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker @ref="_picker" Label="With action buttons" @bind-Date="date">
            <PickerActions>
                <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.Clear())">Clear</MudButton>
                <MudButton OnClick="@(() => _picker.Close(false))">Cancel</MudButton>
                <MudButton Color="Color.Primary" OnClick="@(() => _picker.Close())">Ok</MudButton>
            </PickerActions>
        </MudDatePicker>
    </MudItem>
</MudGrid>
@code {
    MudDatePicker _picker;
    DateTime? date = DateTime.Today;
}

Internationalization

When you set the Culture parameter the DatePicker will use culture specific month names, weekday names and even different calenders.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@using System.Globalization
<MudGrid> 
     <MudItem xs="12" sm="6" md="4">
         <MudDatePicker Label="Current UI Culture" @bind-Date="date" />
     </MudItem>
     <MudItem xs="12" sm="6" md="4">
         <MudDatePicker Label="Persian" @bind-Date="date" Culture="@CultureInfo.GetCultureInfo("fa-Ir")" UseShortNames="false" TitleDateFormat="dddd, dd MMMM"/>
     </MudItem>
     <MudItem xs="12" sm="6" md="4">
         <MudDatePicker Label="Chinese" @bind-Date="date" Culture="@CultureInfo.GetCultureInfo("zh-Hans")" TitleDateFormat="dddd, dd MMMM"/>
     </MudItem>
</MudGrid>
@code {
    DateTime? date = new DateTime(2021, 02, 14); // 1399-11-26 in Persian calendar
}

Dialog Mode

No header

For custom cultures

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Picker example" Text="2020-10-19" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Only Calendar" Text="2020-10-19" DisableToolbar="true" HelperText="No header" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Date Format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" Date="@(new System.DateTime(2020,10,19))" />
    </MudItem>
</MudGrid>

Static Mode

April 2021

SunMonTueWedThuFriSat
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudDatePicker PickerVariant="PickerVariant.Static" Date="@(DateTime.Today.AddDays(1))" />
<MudHidden Breakpoint="@Breakpoint.Xs">
    <MudDatePicker PickerVariant="PickerVariant.Static" Orientation="Orientation.Landscape" Date="@(DateTime.Today.AddDays(1))" />
</MudHidden>

Different views

By default it opens to Date, but can be set to Year or Month.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Year" OpenTo="OpenTo.Year" Text="2020-10-19" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Month" OpenTo="OpenTo.Month" Text="2020-10-19" />
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Date" Text="2020-10-19" />
    </MudItem>
</MudGrid>

Colors

April 2021

SunMonTueWedThuFriSat

April 2021

SunMonTueWedThuFriSat
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudDatePicker PickerVariant="PickerVariant.Static" Color="Color.Success" Rounded="true" Date="@(DateTime.Today.AddDays(1))" />

<MudDatePicker PickerVariant="PickerVariant.Static" Color="Color.Secondary" Rounded="true" Date="@(DateTime.Today.AddDays(1))" />

Elevation

You can change the elevation with the Elevation parameter the default value is 0 for static and 8 for inline.

April 2021

SunMonTueWedThuFriSat

April 2021

SunMonTueWedThuFriSat
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudDatePicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="1" Date="@(DateTime.Today.AddDays(1))" />

<MudDatePicker PickerVariant="PickerVariant.Static" Rounded="true" Elevation="12" Date="@(DateTime.Today.AddDays(1))" />

Range Picker Usage

For custom cultures

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudGrid>
    <MudItem xs="12" sm="6">
        <MudDateRangePicker Label="Basic range picker" @bind-DateRange="_dateRange" />
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudDateRangePicker Label="Basic range picker (editable)" Editable="true" @bind-DateRange="_dateRange" />
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudDateRangePicker Label="Range picker format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" @bind-DateRange="_dateRange" />
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudDateRangePicker Label="Custom start month" StartMonth="@DateTime.Now.AddMonths(-1)" @bind-DateRange="_dateRange" />
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudDateRangePicker @ref="_picker" Label="With action buttons" @bind-DateRange="_dateRange">
            <PickerActions>
                <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.Clear())">Clear</MudButton>
                <MudButton OnClick="@(() => _picker.Close(false))">Cancel</MudButton>
                <MudButton Color="Color.Primary" OnClick="@(() => _picker.Close())">Ok</MudButton>
            </PickerActions>
        </MudDateRangePicker>
    </MudItem>
</MudGrid>
@code { 
    MudDateRangePicker _picker;
    DateRange _dateRange = new DateRange(DateTime.Now.Date, DateTime.Now.AddDays(5).Date);
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙