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

How to Customize the DateRangePicker


Product DateRangePicker for Blazor


This KB article answers the following questions:

  • How to customize the styling of the Blazor DateRangePicker?
  • How to disable the weekends in the DateRangePicker component?
  • How to reduce the width of the two DateInputs?
  • How to prevent horizontal expansion of the DateRangePicker?
  • How to hide the Start and End labels of the DateRangePicker?
  • How to make the DateRangePicker more compact?


  1. Use a Class parameter and custom CSS to override the theme and hide the labels (.k-floating-label). Note that using display: none, violates the accessibility compliance. Instead, use font-size: 0, for example.
  2. Override the default width of 10em of the two DateInputs (.k-dateinput).
  3. Change the display of the element to inline by using display:inline-flex to prevent the horizontal expansion of the component.
  4. Set the padding-top: 0 of the .k-floating-label-container to remove reserved space and make the DateRangePicker more compact.

Customized Blazor DateRangePicker

<span style="display:inline-block;border: 1px solid red;">
    <TelerikDateRangePicker @bind-StartValue="@StartValue"
                            Min="@Min" Max="@Max"
                            Class="no-labels smaller-width"

    /* remove reserved space for labels */
    .no-labels .k-floating-label-container {
        padding-top: 0;

    /* hide labels */
    .no-labels .k-floating-label {
        font-size: 0;
        color: transparent;

    /* prevent horizontal expansion */
    span.smaller-width {
        display: inline-flex;
        width: min-content;

        /* reduce textbox width */
        span.smaller-width .k-dateinput {
            width: 7em;

    /* make weekends disabled */
    .no-weekends .k-calendar-td[title*="Saturday"],
    .no-weekends .k-calendar-td[title*="Sunday"] {
        color: #424242;
        opacity: .6;
        pointer-events: none;


@code {
    private DateTime? StartValue { get; set; }
    private DateTime? EndValue { get; set; }

    private DateTime Min = DateTime.Today.AddYears(-200);
    private DateTime Max = DateTime.Today.AddYears(100);

See Also

In this article