MudBlazor

Date Picker

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

API

Basic Usage

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.

No header

For custom cultures

<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="Editable with Placeholder" Editable="true" @bind-Date="date" Placeholder="Select 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.

@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

No header

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.

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

For custom cultures

<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);
}
Color Picker
Time Picker
An error has occurred. This application may no longer respond until reloaded. Reload 🗙