Hide DatePicker input box

Environment

Product

DatePicker for Blazor, DateTimePicker for Blazor, TimePicker for Blazor

Description

Is there a way to hide the input portion of the DatePicker and leave only the Select/Icon?

Solution

You can use some custom CSS to hide the input and leave only the select icon.

To make sure you are styling only the desired instance of the DatePicker (and not all instances on the page/app) use the Class parameter to provide your custom CSS class to the component.

You can also style the icon button as needed.

<style>
    .date-picker-only-icon .k-picker-wrap {
        border: none;
    }

    .date-picker-only-icon .k-widget.k-dateinput {
        display: none;
    }

    .date-picker-only-icon .k-select {
        width: 30px;
        height: 30px;
    }
</style>

The selected date is: @datePickerValue.ToShortDateString()
<br />

<TelerikDatePicker Class="date-picker-only-icon" @bind-Value="datePickerValue"></TelerikDatePicker>

@code  {
    DateTime datePickerValue { get; set; } = DateTime.Now;

}