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

Hide Start and End labels of the DateRangePicker

Environment

Product DateRangePicker for Blazor

Description

Is there a way to disable/hide the labels for start and end? I'm having issues fitting this control in another vendor's Form Layout.

Solution

You can use some custom CSS rules to hide the Start and End labels. You can also remove the top padding of the k-floating-label-container, so that there is no gap left above the component.

To make sure you are only styling the desired instance of the DateRangePicker (and not all instances on the page/app) use its Class parameter to add your custom CSS class to the component and use it to specify the selector.

<style>
    .daterangepicker-no-labels .k-label {
        display: none;
    }

    .daterangepicker-no-labels .k-floating-label-container{
        padding: 0;
    }
</style>

<TelerikDateRangePicker Class="daterangepicker-no-labels"
                        @bind-StartValue="@StartValue"
                        @bind-EndValue="@EndValue">
</TelerikDateRangePicker>

@code {
    public DateTime? StartValue { get; set; } = DateTime.Now;
    public DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10);
}
In this article