New to Telerik UI for Blazor? Download free 30-day trial

Hide DatePicker input box


Product DatePicker for Blazor, DateTimePicker for Blazor, TimePicker for Blazor


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


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.

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

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

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

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

In this article
Not finding the help you need? Improve this article