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 { 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!
<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.
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"; } } }