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