Date Picker - MudBlazor

Basic Usage

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

If AutoClose is set to true and PickerActions are defined, selecting a day will close the MudDatePicker. If ReadOnly is set to true, the DatePicker can be used but the value will remain unchanged regardless of the actions performed or the values entered.

Basic example

ReadOnly

Basic example (editable)

Only Calendar

No header

Date Format

For custom cultures

Show week number

Display two months

With action buttons

AutoClose

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Basic example" @bind-Date="date" ReadOnly="@readOnly"/>
        <MudSwitch @bind-Checked="@readOnly" Color="Color.Tertiary">ReadOnly</MudSwitch>
    </MudItem>
    <MudItem xs="12" sm="6" md="4">
        <MudDatePicker Label="Basic example (editable)" Editable="true" @bind-Date="date" />
    </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" AutoClose="@autoClose">
            <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>
        <MudSwitch @bind-Checked="@autoClose" Color="Color.Secondary">AutoClose</MudSwitch>
    </MudItem>
</MudGrid>

@code {
    MudDatePicker _picker;
    DateTime? date = DateTime.Today;
    private bool autoClose;
    private bool readOnly;
}

Internationalization

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

Current UI Culture

Persian

Chinese

@using System.Globalization
@using System.Reflection
<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="@GetPersianCulture()" 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

    public CultureInfo GetPersianCulture()
    {
        var culture = new CultureInfo("fa-IR");
        DateTimeFormatInfo formatInfo = culture.DateTimeFormat;
        formatInfo.AbbreviatedDayNames = new[] { "ی", "د", "س", "چ", "پ", "ج", "ش" };
        formatInfo.DayNames = new[] { "یکشنبه", "دوشنبه", "سه شنبه", "چهار شنبه", "پنجشنبه", "جمعه", "شنبه" };
        var monthNames = new[]
        {
            "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن",
            "اسفند",
            "",
        };
        formatInfo.AbbreviatedMonthNames =
            formatInfo.MonthNames =
                formatInfo.MonthGenitiveNames = formatInfo.AbbreviatedMonthGenitiveNames = monthNames;
        formatInfo.AMDesignator = "ق.ظ";
        formatInfo.PMDesignator = "ب.ظ";
        formatInfo.ShortDatePattern = "yyyy/MM/dd";
        formatInfo.LongDatePattern = "dddd, dd MMMM,yyyy";
        formatInfo.FirstDayOfWeek = DayOfWeek.Saturday;
        System.Globalization.Calendar cal = new PersianCalendar();
        FieldInfo fieldInfo = culture.GetType().GetField("calendar", BindingFlags.NonPublic | BindingFlags.Instance);
        if (fieldInfo != null)
            fieldInfo.SetValue(culture, cal);
        FieldInfo info = formatInfo.GetType().GetField("calendar", BindingFlags.NonPublic | BindingFlags.Instance);
        if (info != null)
            info.SetValue(formatInfo, cal);
        culture.NumberFormat.NumberDecimalSeparator = "/";
        culture.NumberFormat.DigitSubstitution = DigitShapes.NativeNational;
        culture.NumberFormat.NumberNegativePattern = 0;
        return culture;
    }
}

Dialog Mode

Picker example

Only Calendar

No header

Date Format

For custom cultures

<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

SunMonTueWedThuFriSat

<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.

Year

Month

Date

<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

SunMonTueWedThuFriSat

<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.

SunMonTueWedThuFriSat

<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

Basic range picker

Basic range picker (editable)

Range picker format

For custom cultures

Custom start month

With action buttons

<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" TitleDateFormat="dddd, dd. MMMM" @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);
}