Just want to know if there's a way to style the input mask of the standard ASP.NET Core InputDate component. I want to set it so the mask is a lighter grey so it's not so aggressive against date controls that actually have the value set.

CodePudding user response：

Here is how you can apply a class or a style to an InputDate based on if it is empty. In the following example when the first InputDate is empty, the class text-muted is applied to make the mask more subtle. When the second InputDate is empty, the style color: lightgrey; is applied instead.

@page "/"

<EditForm Model="_order">
    <InputDate @bind-Value="_order.OrderDate"
               text-muted" : null)" />

    <InputDate @bind-Value="_order.ArrivalDate"
               style="@(_order.ArrivalDate == null ? "color: lightgrey;" : null)" />
</EditForm>

@code{
    private Order _order = new Order();
    
    public class Order
    {
        public DateTime? OrderDate { get; set; }
        public DateTime? ArrivalDate { get; set; }
    }
}

BlazorFiddle

Solution using custom component:

I created a custom InputDate component that you can apply styles and classes when it's empty.

@typeparam TValue
@inherits InputDate<TValue>

<InputDate @attributes="@AdditionalAttributes"
           DisplayName="@DisplayName"
           ParsingErrorMessage="@ParsingErrorMessage"
           TValue="TValue"
           Type="@Type"
           Value="@Value"
           ValueChanged="@ValueChanged"
           ValueExpression="@ValueExpression"
           @oninput="HandleInput"
           style="@_style"
            />

@code {
    [Parameter]
    public string? EmptyStyle { get; set; }
    [Parameter]
    public string? EmptyClass { get; set; }

    private string? _style;
    private string? _class;

    protected override void OnParametersSet()
    {
        if (EqualityComparer<TValue>.Default.Equals(Value, default))
        {
            _style = EmptyStyle;
            _class = EmptyClass;
        }
        else
        {
            _style = null;
            _class = null;
        }
    }

    private void HandleInput(ChangeEventArgs e)
    {
        if (string.IsNullOrEmpty(e.Value?.ToString()))
        {
            _style = EmptyStyle;
            _class = EmptyClass;
        }
        else
        {
            _style = null;
            _class = null;
        }
    }
}

Example:

@page "/"

<EditForm Model="_order">
    <CustomInputDate @bind-Value="_order.OrderDate"
                     EmptyStyle="color: lightgrey; background-color: grey;" />

    <CustomInputDate @bind-Value="_order.ArrivalDate"
                     EmptyClass="text-muted bg-warning" />
</EditForm>

@code{
    private Order _order = new Order();
    
    public class Order
    {
        public DateTime? OrderDate { get; set; }
        public DateTime? ArrivalDate { get; set; }
    }
}

Online demo