MatBlazor - Material Design components for Blazor and Razor Components

MatDatePicker

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

1/14/2020 3:51:01 AM
Features

DateTime format

Full support of .NET DateTime formats

EnableTime

Minimum

Maximum

Minimum and Maximum

EnableSeconds

Enable24hours

EnableWeekNumbers

EnableWeekNumbers

DisableCalendar

AllowInput

Disabled

ReadOnly

Generic types

1/1/0001 12:54:00 AM
Variants

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: 1/24/2020 3:51:01 AM

Current local time: 1/24/2020 3:51:01 AM

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