blazor-docs/knowledge-base/daterangepicker-hide-labels.md

title	description	type	page_title	slug	position	tags	ticketid	res_type
Hide Start and End labels of the DateRangePicker	How to hide Start and End labels of the DateRangePicker.	how-to	Hide Start and End labels of the DateRangePicker	daterangepicker-kb-hide-labels			1504745	kb

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);
}