Hide DatePicker Input

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 selections Icon? Users should not see or type in the textbox.

Solution

Use custom CSS to hide the textbox and leave only the button and icon.

To customize only specific Date/Time Pickers, use their Class parameter.

This technique prevent automatic closing of the DatePicker popup after the user selects a date. To hide the popup, call JavaScript from the ValueChanged event handler. This workaround is not necessary for DateTimePickers and TimePickers.

Hide Date/Time Picker TextBox

@inject IJSRuntime js

<p>DatePickerValue: @DatePickerValue.ToLongDateString()</p>

DatePicker:
<TelerikDatePicker Class="date-picker-only-icon"
                   Value="@DatePickerValue"
                   Id="datePicker1"
                   ValueChanged="@( (DateTime newValue) => OnValueChanged(newValue, "datePicker1") )" />

DateTimePicker:
<TelerikDateTimePicker Class="date-picker-only-icon"
                       @bind-Value="@DatePickerValue" />

TimePicker:
<TelerikTimePicker Class="date-picker-only-icon"
                   @bind-Value="@DatePickerValue" />

<style>
    .date-picker-only-icon.k-input {
        width: auto;
    }

    .date-picker-only-icon .k-dateinput {
        display: none;
    }
</style>

@* Move this script outside the Razor component *@
<script suppress-error="BL9992">
    function closePickerPopup(pickerId) {
        document.getElementById(pickerId).dispatchEvent(new Event("focus"));
    }
</script>

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

    async Task OnValueChanged(DateTime newValue, string pickerId)
    {
        DatePickerValue = newValue;

        // close the DatePicker popup automatically
        await js.InvokeVoidAsync("closePickerPopup", pickerId);
    }
}

@* CSS for UI for Blazor 2.30 and older versions *@

@*<style>
    .date-picker-only-icon,
    .date-picker-only-icon .k-picker-wrap {
        width: auto;
    }

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

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