How do I disable blazor InputDate component's datepicker?

Question

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?

What do you mean by "date masking," and why do you want to prevent an html input from inputting? — Bennyboy1973, Feb 13 '22 at 13:47
I'm assuming the OP wants to disable the calendar, but keep the native date formatting such as MM/dd/yyyy — Jason D, Feb 14 '22 at 21:11

Jason D · Accepted Answer · 2022-02-14T21:48:11.187

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

How do I disable blazor InputDate component's datepicker?

1 Answers1