New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Customizing the Embedded Controls

The RadDateRangePicker control is a composite object, containing two embedded RadDatePicker controls (StartDatePicker and EndDatePicker) and a RadCalendar control. All of these embedded controls can be customized, just as you can customize a standalone RadDatePicker or RadCalendar control.

To customize the embedded controls, you can use the corresponding inner tags in the declaration, or use the dedicated properties in the code-behind.

Modifying the settings of a child control provides greater flexibility when configuring the look and feel of the RadDateRangePicker control – you have complete control over the settings of the embedded controls.

With that said, you can:

RadDatePicker is a composite control as well, so you can go deeper and customize its embedded DateInput and PopUpButton as described in the RadDatePicker's documentation

Check out the sample below:

Customized embedded controls

<telerik:RadDateRangePicker runat="server" ID="RadDateRangePicker1" Skin="Bootstrap" Width="800">
    <Calendar CellAlign="Center"
        RangeMinDate="8/8/2021"
        RangeMaxDate="9/9/2021"
        CellVAlign="Middle"
        DayNameFormat="FirstLetter"
        FirstDayOfWeek="Default"
        MonthLayout="Layout_14columns_x_3rows"
        Orientation="RenderInRows"
        TitleAlign="Center"
        UseColumnHeadersAsSelectors="False"
        ShowRowHeaders="False">
    </Calendar>
    <StartDatePicker Width="300">
        <DatePopupButton
            Visible="true"
            CssClass="startPopupCustomIcon"
            BorderColor="#D0E1F2"
            BorderStyle="Solid"
            BorderWidth="1px" />
        <DateInput DateFormat="MMM d  yyyy"
            DisplayDateFormat="dddd, MMMM  d, yyyy">
        </DateInput>
    </StartDatePicker>
    <EndDatePicker Width="300">
        <DateInput DateFormat="MMM d  yyyy"
            DisplayDateFormat="dddd, MMMM  d, yyyy">
        </DateInput>
    </EndDatePicker>
</telerik:RadDateRangePicker>
html body .RadDateRangePicker .startPopupCustomIcon:before {
    font-family: "Font Awesome 5 Free";
    content: "\f274";
}

In the sample above, the DatePopUpButton contains a third-party font icon that requires a reference to an external library. Find out how to replace the embedded font icons of Telerik controls with external ones in the 4 Ways to Embed Font Awesome in Telerik UI for ASP.NET AJAX Controls blog post.

See Also

In this article
Not finding the help you need? Improve this article