Datepicker/Calendar displaying unwanted caption space

1 Answer 61 Views
Calendar DateInput DatePicker
Jaite
Top achievements
Rank 1
Jaite asked on 09 Sep 2021, 11:58 PM | edited on 10 Sep 2021, 12:15 AM

I've been trying to resolve an issue with my RadCalendar/Datepicker with Telerik, maybe with bootstrap messing up things.

After upgrading to bootstrap 5 the calendar displays 2 extra caption spaces below the title and below the calendar. How can I remove these caption spaces? I have something simple like this in a row.

<div class='col2' <telerik:raddatepicker id="1234" mindate:"5/5/5555" calendar-showheaders="false" calendar-tltleformat="mmm yyyy" skin="telirek"

</telerick:raddatepicker>

</div>


1 Answer, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 13 Sep 2021, 11:43 AM

Hi Jaite,

There are a couple of errors that you will need to correct.

  1. IDs of Controls cannot start with numbers, you will need to provide another ID starting with letters e.g. MyPicker1234
  2. The MinDate "5/5/5555" would also throw and error because this date is after the MaxDate. The Default MaxDate is "12/31/2099", so you will need to define a MaxDate that will be after the MinDate. e.g. "5/5/6666"
  3. Recent versions of the Calendar have no property called "Calendar-ShowHeader". They have "Calendar-ShowColumnHeaders" and "Calendar-ShowRowHeaders" properties. Consider fixing that too.
  4. There is no built-in Skin named "telirek", and if you're using a Custom Skin, be sure to disable the Embedded Skins by setting the "EnableEmbeddedSkins" property to "False". Or if you were trying to use the built-in Skin, correct the name to "Telerik".

 

I have tried the following markup with Bootstrap v5 and is working as expected:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <asp:ScriptReference Path="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" />
    </Scripts>
</telerik:RadScriptManager>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">

<div class="col2">
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" MinDate="5/5/5555" MaxDate="5/5/6666" Calendar-ShowColumnHeaders="false" Calendar-ShowRowHeaders="false" Calendar-TitleFormat="mmm yyyy" Skin="Telerik">
    </telerik:RadDatePicker>
</div>

 

Regards,
Attila Antal
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Calendar DateInput DatePicker
Asked by
Jaite
Top achievements
Rank 1
Answers by
Attila Antal
Telerik team
Share this question
or