MudBlazor - Blazor Component Library

Basic Usage

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

Basic example

Editable with Placeholder

Only Calendar

Date Format

Show week number

Display two months

<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" ShowToolbar="false" />
<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 {
    private DateTime? _date = DateTime.Today;
}

Input Masking

By setting the Mask parameter, an editable DatePicker can be used with any suitable input mask, preferably 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!

dd.MM.yyyy

MM/dd/yyyy

yyyy-MM-dd

<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 {
    private DateTime? _date1 = null;
    private DateTime? _date2 = DateTime.Today;
    private 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.

Flexible Date

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 {
    private DateTime? _date = null;
    private string _dateFormat = "dd.MM.yyyy";
    private 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.

Read only

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

@code {
    private DateTime? _date = DateTime.Today;
}

Disable or customize days

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

Not working days, Sunday in red

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

With action buttons

AutoClose

<MudDatePicker @ref="_picker" Label="With action buttons" @bind-Date="_date" AutoClose="@_autoClose">
    <PickerActions>
        <MudButton Class="mr-auto align-self-start" OnClick="@(() => _picker.ClearAsync())">Clear</MudButton>
        <MudButton OnClick="@(() => _picker.CloseAsync(false))">Cancel</MudButton>
        <MudButton Color="Color.Primary" OnClick="@(() => _picker.CloseAsync())">Ok</MudButton>
    </PickerActions>
</MudDatePicker>
<MudSwitch @bind-Value="_autoClose" Color="Color.Secondary">AutoClose</MudSwitch>

@code {
    private MudDatePicker _picker;
    private DateTime? _date = DateTime.Today;
    private bool _autoClose;
}

Date Picker