I would transform RDP like
<div class="input-group date">
<input type="text" class="form-control"><span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
so how can i do it?
I obtained only a little success setting
CssClass="form-control" for DateInput part.
Thank you.
2 Answers, 1 is accepted
I am afraid with the current rendering on the RadDatePicker this behavior cannot be achieved only by adding a simple CssClass. However you can build a custom Skin or wait to the next release where the Bootstrap Skin will be built in.
Regards,
Galin
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
Rank 1
Hi Deepu,
We have an article that addresses the Style issues that may be caused by the Twitter Bootstrap. Please visit the Fix incorrect appearance in Telerik controls when using Bootstrap library for the solution.
There is also a chance that the issue is caused by a JavaScript error. That will prevent the RadDatePicker to function properly.
In that case, you open the Browser's DevTools and double-check the Console tab for JavaScript errors. If you see any, you will need to eliminate them to ensure the proper behavior of Telerik Components.
For tips and details about Debugging apps in the Browser, you can check out the following articles:
If my suggestions do not help fix the issue, I will need to see the problem. Please share the RadDatePicker markup code, tell us which bootstrap version you have included. Once we have enough information to replicate the problem, we can tell you how to fix it.
Hello,
Telerik Web UI for ASP.NET AJAX Components are more complex and they render a specific structure and may not be compatible with Twitter Bootstrap styles.
If you add this RadDatePicker Component to the page:
<telerik:RadDatePicker ID="RadDatePicker1" runat="server"></telerik:RadDatePicker>
This will render the following HTML element and structure
<div id="RadDatePicker1_wrapper" class="RadPicker RadPicker_Default">
<!-- 2022.1.119.45 -->
<input style="visibility: hidden; display: block; float: right; margin: 0 0 -1px -1px; width: 1px; height: 1px; overflow: hidden; border: 0; padding: 0;" id="RadDatePicker1" name="RadDatePicker1" type="text" class="rdfd_ radPreventDecorate" value="" title="Visually hidden input created for functionality purposes.">
<div id="RadDatePicker1_dateInput_wrapper" class="RadInput RadInput_Default">
<input id="RadDatePicker1_dateInput" name="RadDatePicker1$dateInput" class="riTextBox riEnabled" type="text">
<div class="rcSelect">
<a title="Open the calendar popup." href="#" id="RadDatePicker1_popupButton" class="rcCalPopup"></a>
<div id="RadDatePicker1_calendar" class="RadCalendar RadCalendar_Default" style="display: none;">
<div class="rcTitlebar">
<a id="RadDatePicker1_calendar_FNP" class="t-button rcFastPrev" title="<<" href="#">
<span class="t-font-icon t-i-arrow-double-60-left"></span>
</a>
<a id="RadDatePicker1_calendar_NP" class="t-button rcPrev" title="<" href="#">
<span class="t-font-icon t-i-arrow-left"></span>
</a>
<div class="rcNextButtons">
<a id="RadDatePicker1_calendar_NN" class="t-button rcNext" title=">" href="#"><span class="t-font-icon t-i-arrow-right"></span></a><a id="RadDatePicker1_calendar_FNN" class="t-button rcFastNext" title=">>" href="#"><span class="t-font-icon t-i-arrow-double-60-right"></span></a>
</div>
<span id="RadDatePicker1_calendar_Title" class="rcTitle">February 2022</span>
</div>
<div class="rcMain">
<table id="RadDatePicker1_calendar_Top" class="rcMainTable">
<caption>
<span style="display: none;">February 2022</span>
</caption>
<thead>
<tr class="rcWeek">
<th class="rcViewSel" scope="col"> </th>
<th id="RadDatePicker1_calendar_Top_cs_1" title="Monday" scope="col">M</th>
<th id="RadDatePicker1_calendar_Top_cs_2" title="Tuesday" scope="col">T</th>
<th id="RadDatePicker1_calendar_Top_cs_3" title="Wednesday" scope="col">W</th>
<th id="RadDatePicker1_calendar_Top_cs_4" title="Thursday" scope="col">T</th>
<th id="RadDatePicker1_calendar_Top_cs_5" title="Friday" scope="col">F</th>
<th id="RadDatePicker1_calendar_Top_cs_6" title="Saturday" scope="col">S</th>
<th id="RadDatePicker1_calendar_Top_cs_7" title="Sunday" scope="col">S</th>
</tr>
</thead>
<tbody>
<tr class="rcRow">
<th id="RadDatePicker1_calendar_Top_rs_1" scope="row">5</th>
<td class="rcOtherMonth" title="Monday, January 31, 2022"><a href="#">31</a></td>
<td title="Tuesday, February 01, 2022"><a href="#">1</a></td>
<td title="Wednesday, February 02, 2022"><a href="#">2</a></td>
<td title="Thursday, February 03, 2022"><a href="#">3</a></td>
<td title="Friday, February 04, 2022"><a href="#">4</a></td>
<td class="rcWeekend" title="Saturday, February 05, 2022"><a href="#">5</a></td>
<td class="rcWeekend" title="Sunday, February 06, 2022"><a href="#">6</a></td>
</tr>
<tr class="rcRow">
<th id="RadDatePicker1_calendar_Top_rs_2" scope="row">6</th>
<td title="Monday, February 07, 2022"><a href="#">7</a></td>
<td title="Tuesday, February 08, 2022"><a href="#">8</a></td>
<td title="Wednesday, February 09, 2022"><a href="#">9</a></td>
<td title="Thursday, February 10, 2022"><a href="#">10</a></td>
<td title="Friday, February 11, 2022"><a href="#">11</a></td>
<td class="rcWeekend" title="Saturday, February 12, 2022"><a href="#">12</a></td>
<td class="rcWeekend" title="Sunday, February 13, 2022"><a href="#">13</a></td>
</tr>
<tr class="rcRow">
<th id="RadDatePicker1_calendar_Top_rs_3" scope="row">7</th>
<td title="Monday, February 14, 2022"><a href="#">14</a></td>
<td title="Tuesday, February 15, 2022"><a href="#">15</a></td>
<td title="Wednesday, February 16, 2022"><a href="#">16</a></td>
<td title="Thursday, February 17, 2022"><a href="#">17</a></td>
<td title="Friday, February 18, 2022"><a href="#">18</a></td>
<td class="rcWeekend" title="Saturday, February 19, 2022"><a href="#">19</a></td>
<td class="rcWeekend" title="Sunday, February 20, 2022"><a href="#">20</a></td>
</tr>
<tr class="rcRow">
<th id="RadDatePicker1_calendar_Top_rs_4" scope="row">8</th>
<td title="Monday, February 21, 2022"><a href="#">21</a></td>
<td title="Tuesday, February 22, 2022"><a href="#">22</a></td>
<td title="Wednesday, February 23, 2022"><a href="#">23</a></td>
<td title="Thursday, February 24, 2022"><a href="#">24</a></td>
<td title="Friday, February 25, 2022"><a href="#">25</a></td>
<td class="rcWeekend" title="Saturday, February 26, 2022"><a href="#">26</a></td>
<td class="rcWeekend" title="Sunday, February 27, 2022"><a href="#">27</a></td>
</tr>
<tr class="rcRow">
<th id="RadDatePicker1_calendar_Top_rs_5" scope="row">9</th>
<td title="Monday, February 28, 2022"><a href="#">28</a></td>
<td class="rcOtherMonth" title="Tuesday, March 01, 2022"><a href="#">1</a></td>
<td class="rcOtherMonth" title="Wednesday, March 02, 2022"><a href="#">2</a></td>
<td class="rcOtherMonth" title="Thursday, March 03, 2022"><a href="#">3</a></td>
<td class="rcOtherMonth" title="Friday, March 04, 2022"><a href="#">4</a></td>
<td class="rcOtherMonth" title="Saturday, March 05, 2022"><a href="#">5</a></td>
<td class="rcOtherMonth" title="Sunday, March 06, 2022"><a href="#">6</a></td>
</tr>
<tr class="rcRow">
<th id="RadDatePicker1_calendar_Top_rs_6" scope="row">10</th>
<td class="rcOtherMonth" title="Monday, March 07, 2022"><a href="#">7</a></td>
<td class="rcOtherMonth" title="Tuesday, March 08, 2022"><a href="#">8</a></td>
<td class="rcOtherMonth" title="Wednesday, March 09, 2022"><a href="#">9</a></td>
<td class="rcOtherMonth" title="Thursday, March 10, 2022"><a href="#">10</a></td>
<td class="rcOtherMonth" title="Friday, March 11, 2022"><a href="#">11</a></td>
<td class="rcOtherMonth" title="Saturday, March 12, 2022"><a href="#">12</a></td>
<td class="rcOtherMonth" title="Sunday, March 13, 2022"><a href="#">13</a></td>
</tr>
</tbody>
</table>
</div>
<input type="hidden" name="RadDatePicker1_calendar_SD" id="RadDatePicker1_calendar_SD" value="[]">
<input type="hidden" name="RadDatePicker1_calendar_AD" id="RadDatePicker1_calendar_AD" value="[[1980,1,1],[2099,12,30],[2022,2,25]]">
</div>
</div>
<input id="RadDatePicker1_dateInput_ClientState" name="RadDatePicker1_dateInput_ClientState" type="hidden" autocomplete="off" value="{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1980-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}">
</div>
<input id="RadDatePicker1_ClientState" name="RadDatePicker1_ClientState" type="hidden" autocomplete="off">
</div>
Such structure is required for all the Functionalities the RadDatePicker can offer, and we do not have plans to change that to make it comply with Twitter Bootstrap's CSS Library.
Telerik Assemblies also deliver built-in skins for Telerik Components, see Built-in Skins.
If you wish to change the appearance of Telerik Components, you can follow the instructions from the Changing the Appearance of a Control article.
For instance, if you wanted the RadDatePicker to look similar to Bootstrap, you can set its Skin property value to Bootstrap.
<telerik:RadDatePicker ID="RadDatePicker1" runat="server" Skin="Bootstrap"></telerik:RadDatePicker>
This will be the result:
If you choose to style the control from scratch, you can disable the built-in Skins by setting the EnableEmbeddedSkins property to false.
That will result in the following appearance:
Regards,
Attila Antal
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.