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