MatBlazor - Material Design components for Blazor and Razor Components


Material Design Datetime picker for Blazor

Name Type Description
TValue Generic argument DateTime, DateTime?
AllowInput Boolean
Attributes Dictionary<String,Object> Gets or sets a collection of additional attributes that will be applied to the created element.
Box Boolean
ChildContent RenderFragment Child content of MatDatePicker
Class String Specifies one or more classnames for an DOM element.
Dense Boolean
DisableCalendar Boolean
Disabled Boolean
DisableMobile Boolean
Enable24hours Boolean
EnableSeconds Boolean
EnableTime Boolean
EnableWeekNumbers Boolean
Format String
FullWidth Boolean
HelperText String
HelperTextPersistent Boolean
HelperTextValidation Boolean
HideClearButton Boolean
Icon String
IconOnClick EventCallback<MouseEventArgs>
IconTrailing Boolean
Id String
InputAttributes IDictionary<String,Object>
InputClass String Css class of input element
InputStyle String Style attribute of input element
Label String
Maximum Nullable<DateTime>
Minimum Nullable<DateTime>
OnFocus EventCallback<FocusEventArgs>
OnFocusOut EventCallback<FocusEventArgs>
OnInput EventCallback<ChangeEventArgs>
OnKeyDown EventCallback<KeyboardEventArgs>
OnKeyPress EventCallback<KeyboardEventArgs>
OnKeyUp EventCallback<KeyboardEventArgs>
Outlined Boolean
PlaceHolder String
Position MatDatePickerPosition
ReadOnly Boolean When true, it specifies that an input field is read-only.
RefBack ForwardRef
Required Boolean
Style String Specifies an inline style for an DOM element.
TextArea Boolean
Type String
ValidationDisabled Boolean
Value TValue Gets or sets the value of the input. This should be used with two-way binding.
ValueChanged EventCallback<TValue> Gets or sets a callback that updates the bound value.
ValueExpression Expression<Func<TValue>> Gets or sets an expression that identifies the bound value.
Ref ElementReference Returned ElementRef reference for DOM element.

5/23/2020 11:29:55 PM

DateTime format

Full support of .NET DateTime formats




Minimum and Maximum









Generic types

1/1/0001 12:54:00 AM


Wrong TimeZone?

To display dates you need to use .ToLocalTime()

But at this time, the latest version of the client-side Blazor doesn't contain any time zone info, and local time zone is always UTC wherever.
To solve this problem, use Toolbelt.Blazor.TimeZoneKit.
You can make sure this solution works here: Client-side MatBlazor

Current time: 6/2/2020 11:29:55 PM

Current local time: 6/2/2020 11:29:55 PM

If you like MatBlazor, please put a star on GitHub.