Date Picker

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

API
Basic Usage

<MudDatePicker Label="Basic example" @bind-Date="date"/>
<MudDatePicker Label="Editable with Placeholder" Editable="true" @bind-Date="date" Placeholder="Select Date" />
<MudDatePicker Label="Only Calendar" @bind-Date="date" DisableToolbar="true" />
<MudDatePicker Label="Date Format" @bind-Date="date" DateFormat="dd.MM.yyyy" />
<MudDatePicker Label="Show week number" ShowWeekNumbers="true" @bind-Date="date" />
<MudDatePicker Label="Display two months" DisplayMonths="2" TitleDateFormat="dddd, dd MMMM" @bind-Date="date" />

@code {
    DateTime? date = DateTime.Today;
}
Input Masking

By setting the Mask parameter, an editable DatePicker can be used with any suitable input mask, preferrably a DateMask which has built-in date awareness. But other masks like PatternMask will work as well, even if they allow to input invalid dates. Make sure the DateFormat fits the mask! 

<MudDatePicker Label="dd.MM.yyyy" Editable="true" @bind-Date="date1" Mask="@(new DateMask("dd.MM.yyyy"))" DateFormat="dd.MM.yyyy" Placeholder="de-AT Date" />
<MudDatePicker Label="MM/dd/yyyy" Editable="true" @bind-Date="date2" Mask="@(new DateMask("MM/dd/yyyy"))" DateFormat="MM/dd/yyyy" Placeholder="en-US Date" />
<MudDatePicker Label="yyyy-MM-dd" Editable="true" @bind-Date="date3" Mask="@(new DateMask("0000-00-00"))" DateFormat="yyyy-MM-dd" Placeholder="ISO Date" />

@code {
    DateTime? date1 = null;
    DateTime? date2 = DateTime.Today;
    DateTime? date3 = null;
}
Text Parsing

By setting the ImmediateText parameter to true, an editable DatePicker's Date can be set manually by parsing the user's text as they type.

not set

@using System.Globalization

<MudDatePicker Label="Flexible Date" Editable="true" Date="date" ImmediateText="true" Placeholder="day.month.year" DateFormat="@dateFormat" TextChanged="DatePickerTextChanged" HelperText="@bound" Clearable="true" />

@code {
    DateTime? date = null;
    string dateFormat = "dd.MM.yyyy";
    string bound = "not set";

    private void DatePickerTextChanged(string value)
    {
        if (value == null || value.Length < 6)
        {
            date = null;
        }
        else
        {
            string[] formats = { "ddMMyy", "dd.MM.yyyy", "dd.M.yyyy", "d.MM.yyyy", "d.M.yyyy", "dd.MM.yy", "dd.M.yy", "d.MM.yy", "d.M.yy" };
            if (DateTime.TryParseExact(value, formats, CultureInfo.InvariantCulture, DateTimeStyles.None, out DateTime validDate))
            {
                date = validDate;
            }
            else
            {
                date = null;
            }
        }

        if (date.HasValue)
        {
            bound = date.Value.ToString(dateFormat); 
        }
        else
        {
            bound = "not set";
        }
    }
}
Read Only

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.

<MudDatePicker Label="Read only" @bind-Date="date" ReadOnly="true"/>

@code {
    DateTime? date = DateTime.Today;
}
Disable or customize days

By setting the IsDateDisabledFunc parameter, it's possibile to disable specific days and by setting the AdditionalDateClassesFunc parameter it's possible to apply a custom class to specific days. 

<MudDatePicker 
  Label="Not working days, sunday in red"   
  IsDateDisabledFunc="@((DateTime dt)=>((int)dt.DayOfWeek > 0 && (int)dt.DayOfWeek < 6))"
  AdditionalDateClassesFunc="@((DateTime dt)=>((int)dt.DayOfWeek == 0 ? "red-text text-accent-4" : ""))"/>
Action Buttons

You can add buttons by using the PickerActions render fragment. If AutoClose is set to true and PickerActions are defined, selecting a day will close the MudDatePicker.

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

@code {
    MudDatePicker _picker;
    DateTime? date = DateTime.Today;
    private bool autoClose;
}
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

<MudDatePicker Label="Current UI Culture" @bind-Date="date" />
<MudDatePicker Label="Persian" @bind-Date="date" Culture="@GetPersianCulture()" UseShortNames="false" TitleDateFormat="dddd, dd MMMM"/>
<MudDatePicker Label="Chinese" @bind-Date="date" Culture="@CultureInfo.GetCultureInfo("zh-Hans")" TitleDateFormat="dddd, dd MMMM"/>

@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

<MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Picker example" Text="2020-10-19" />
<MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Only Calendar" Text="2020-10-19" DisableToolbar="true" HelperText="No header" />
<MudDatePicker PickerVariant="PickerVariant.Dialog" Label="Date Format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" Date="@(new System.DateTime(2020,10,19))" />
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.

<MudDatePicker Label="Year" OpenTo="OpenTo.Year" Text="2020-10-19" />
<MudDatePicker Label="Month" OpenTo="OpenTo.Month" Text="2020-10-19" />
<MudDatePicker Label="Date" Text="2020-10-19" />
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))" />
Go To Date

GoToDate method helps to control the component programmatically. With GoToDate, users can navigate between dates with or without submitting. Works with all picker variants.
This example shows the possible usage of GoToDate.

SunMonTueWedThuFriSat
<MudDatePicker @ref="_picker" @bind-Date="date" PickerVariant="PickerVariant.Static" MaxDate="maxDate">
    <PickerActions>
        <MudButton Class="mr-auto align-self-start" OnClick="Today">Today</MudButton>
    </PickerActions>
</MudDatePicker>

<div class="d-flex flex-column gap-4">
    <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="CurrentDate">Move To Current Date</MudButton>
    <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="MudRelease">When First Mud Released?</MudButton>
    <MudButton Color="Color.Primary" Variant="Variant.Filled" OnClick="GoMaxDateWithoutSubmit">Go To Max Date Without Submit</MudButton>
</div>

@code {
    MudDatePicker _picker;
    DateTime? date = DateTime.Today.AddDays(210);
    DateTime? maxDate = new DateTime(2050, 12, 31);

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            _picker.GoToDate();
        }
    }

    private async Task Today()
    {
        await _picker.GoToDate(DateTime.Today);
    }

    private void CurrentDate()
    {
        _picker.GoToDate();
    }

    private async Task MudRelease()
    {
        await _picker.GoToDate(new DateTime(2020, 10, 18));
    }

    private async Task GoMaxDateWithoutSubmit()
    {
        await _picker.GoToDate(maxDate.Value, false);
    }
}
Fixed Values Usage

You can set fix values for day, month or year via FixDay, FixMonth and FixYear, default value is null for all of them. This in combination with the OpenTo parameter allows for Year-Month Pickers, where the user only selects those two values or Month-Day Pickers where the year is already given. This changes the behaviour of the picker so only views that can be set are displayed. 

<MudDatePicker Label="Year-Month Picker (Fixed Day)" HelperText="@_yearMonth?.ToShortDateString()" @bind-Date="_yearMonth" OpenTo="OpenTo.Year" FixDay="1" DateFormat="yyyy/MM" />
<MudDatePicker Label="Month-Day Picker (Fixed Year)" HelperText="@_monthDay?.ToShortDateString()" @bind-Date="_monthDay" OpenTo="OpenTo.Month" FixYear="2021" DateFormat="MM/dd" />
<MudDatePicker Label="Year-Day Picker (Fixed Month)" HelperText="@_yearDay?.ToShortDateString()" @bind-Date="_yearDay" OpenTo="OpenTo.Year" FixMonth="10" />
<MudDatePicker Label="Year Picker (Fixed Month and Day)" HelperText="@_year?.ToShortDateString()" @bind-Date="_year" OpenTo="OpenTo.Year" FixMonth="@DateTime.Today.Month" FixDay="@DateTime.Today.Day" DateFormat="yyyy" />
<MudDatePicker Label="Month Picker (Fixed Year and Day)" HelperText="@_month?.ToShortDateString()" @bind-Date="_month" OpenTo="OpenTo.Month" FixYear="@DateTime.Today.Year" FixDay="@DateTime.Today.Day" DateFormat="MMM" />
<MudDatePicker Label="Day Picker (Fixed Year and Month)" HelperText="@_day?.ToShortDateString()" @bind-Date="_day" FixYear="@DateTime.Today.Year" FixMonth="@DateTime.Today.Month" DateFormat="dd" />

@code { 
    DateTime? _yearMonth;
    DateTime? _monthDay;
    DateTime? _yearDay;
    DateTime? _year;
    DateTime? _month;
    DateTime? _day;
}
Range Picker Usage

For custom cultures

<MudStack>
    <MudDateRangePicker Label="Basic range picker" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Basic range picker (editable)" Editable="true" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Placeholder" @bind-DateRange="_dateRange" PlaceholderStart="Start Date" PlaceholderEnd="End Date" />
    <MudDateRangePicker Label="Clearable" @bind-DateRange="_dateRange" Clearable="true" />
    <MudDateRangePicker Label="Range picker format" HelperText="For custom cultures" DateFormat="dd/MM/yyyy" TitleDateFormat="dddd, dd. MMMM" @bind-DateRange="_dateRange" />
    <MudDateRangePicker Label="Custom start month" StartMonth="@DateTime.Now.AddMonths(-1)" @bind-DateRange="_dateRange" />
    <MudDateRangePicker @ref="_picker" Label="With action buttons" @bind-DateRange="_dateRange" 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>
    </MudDateRangePicker>
    <MudSwitch @bind-Checked="@_autoClose" Color="Color.Secondary">AutoClose</MudSwitch>
</MudStack>

@code { 
    private MudDateRangePicker _picker;
    private DateRange _dateRange = new DateRange(DateTime.Now.Date, DateTime.Now.AddDays(5).Date);
    private bool _autoClose;
}
Color Picker
Time Picker
An unhandled error has occurred. Reload 🗙