blazorblazor-server-sideblazor-editform

How do I disable blazor InputDate component's datepicker?

Given:

<Input Date class="form-control" @bind-Value="item.Birthday" />

How do I prevent the datepicker from popping up, while still taking advantage of the date masking?

Solution

  • The solution requires CSS and is not specific to Blazor.

    But here is some sample code written in Blazor that I tested and verified in Google Chrome:

    @page "/"

<style>
    input::-webkit-calendar-picker-indicator {
        display: none;
    }
</style>

<EditForm Model="@myPerson">
    <InputDate class="form-control" @bind-Value="@myPerson.Birthday" />
</EditForm>

@code {
    Person myPerson = new Person();
    public class Person
    {
        public DateTime Birthday { get; set; } = DateTime.Now;
    }
}

    Reference: Disable Native DatePicker