This is a migrated thread and some comments may be shown as answers.

RadDatePicker and Bootstrap style

2 Answers 157 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Emanuele
Top achievements
Rank 1
Veteran
Emanuele asked on 15 Dec 2014, 02:48 PM
Hi, i'm having troubles using RadDatePicker; i tried to build a layout like bootstrap without success.

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

Sort by
0
Galin
Telerik team
answered on 18 Dec 2014, 03:00 PM
Hello Emanuele,

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.

 
Deepu
Top achievements
Rank 1
commented on 22 Feb 2022, 11:50 AM

Hi @Galin, is this feature still spending? I am also having the same trouble when using Bootstrap template and RadDatePicker not working (not getting popup calendar) in Bootstrap styles. 
Attila Antal
Telerik team
commented on 25 Feb 2022, 11:07 AM

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.

0
Attila Antal
Telerik team
answered on 25 Feb 2022, 10:59 AM

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">&nbsp;</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="{&quot;enabled&quot;:true,&quot;emptyMessage&quot;:&quot;&quot;,&quot;validationText&quot;:&quot;&quot;,&quot;valueAsString&quot;:&quot;&quot;,&quot;minDateStr&quot;:&quot;1980-01-01-00-00-00&quot;,&quot;maxDateStr&quot;:&quot;2099-12-31-00-00-00&quot;,&quot;lastSetTextBoxValue&quot;:&quot;&quot;}">
    </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.

Tags
Calendar
Asked by
Emanuele
Top achievements
Rank 1
Veteran
Answers by
Galin
Telerik team
Attila Antal
Telerik team
Share this question
or