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

DatePicker rendering diferent on localhost and in serverside

1 Answer 64 Views
DatePicker
This is a migrated thread and some comments may be shown as answers.
Arnau
Top achievements
Rank 1
Arnau asked on 12 Sep 2017, 10:45 AM

In localhost

<div class="RadPicker RadPicker_Default" id="FechaConcesionDatePicker_wrapper" style="width: 95px;"><br>        <input name="FechaConcesionDatePicker" title="Visually hidden input created for functionality purposes." class="rdfd_ radPreventDecorate" id="FechaConcesionDatePicker" style="margin: 0px 0px -1px -1px; padding: 0px; border: 0px currentColor; border-image: none; width: 1px; height: 1px; overflow: hidden; float: right; display: block; visibility: hidden;" type="text" value=""><div class="RadInput RadInput_Default" id="FechaConcesionDatePicker_dateInput_wrapper"><br>            <input name="FechaConcesionDatePicker$dateInput" class="riTextBox riEnabled" id="FechaConcesionDatePicker_dateInput" type="text"><div class="rcSelect"><br>                <a title="Open the calendar popup." class="rcCalPopup" id="FechaConcesionDatePicker_popupButton" href="#"></a><div class="RadCalendar RadCalendar_Default" id="FechaConcesionDatePicker_calendar" style="display: none;"><br>                    <div class="rcTitlebar"><br>                        <a title="<<" class="t-button rcFastPrev" id="FechaConcesionDatePicker_calendar_FNP" href="#"><span class="t-font-icon t-i-arrow-double-60-left"></span></a><a title="<" class="t-button rcPrev" id="FechaConcesionDatePicker_calendar_NP" href="#"><span class="t-font-icon t-i-arrow-left"></span></a><div class="rcNextButtons"><br>                            <a title=">" class="t-button rcNext" id="FechaConcesionDatePicker_calendar_NN" href="#"><span class="t-font-icon t-i-arrow-right"></span></a><a title=">>" class="t-button rcFastNext" id="FechaConcesionDatePicker_calendar_FNN" href="#"><span class="t-font-icon t-i-arrow-double-60-right"></span></a><br>                        </div><span class="rcTitle" id="FechaConcesionDatePicker_calendar_Title">septiembre de 2017</span><br>                    </div><div class="rcMain"><br>                        <table class="rcMainTable" id="FechaConcesionDatePicker_calendar_Top"><br>                            <caption><br>                                <span style="display: none;">septiembre de 2017</span><br>                            </caption><thead><br>                                <tr class="rcWeek"><br>                                    <th class="rcViewSel" scope="col">&nbsp;</th><th title="lunes" id="FechaConcesionDatePicker_calendar_Top_cs_1" scope="col">l</th><th title="martes" id="FechaConcesionDatePicker_calendar_Top_cs_2" scope="col">m</th><th title="miércoles" id="FechaConcesionDatePicker_calendar_Top_cs_3" scope="col">m</th><th title="jueves" id="FechaConcesionDatePicker_calendar_Top_cs_4" scope="col">j</th><th title="viernes" id="FechaConcesionDatePicker_calendar_Top_cs_5" scope="col">v</th><th title="sábado" id="FechaConcesionDatePicker_calendar_Top_cs_6" scope="col">s</th><th title="domingo" id="FechaConcesionDatePicker_calendar_Top_cs_7" scope="col">d</th><br>                                </tr><br>                            </thead><tbody><br>                                <tr class="rcRow"><br>                                    <th id="FechaConcesionDatePicker_calendar_Top_rs_1" scope="row">36</th><td title="lunes, agosto 28, 2017" class="rcOtherMonth"><a href="#">28</a></td><td title="martes, agosto 29, 2017" class="rcOtherMonth"><a href="#">29</a></td><td title="miércoles, agosto 30, 2017" class="rcOtherMonth"><a href="#">30</a></td><td title="jueves, agosto 31, 2017" class="rcOtherMonth"><a href="#">31</a></td><td title="viernes, septiembre 01, 2017"><a href="#">1</a></td><td title="sábado, septiembre 02, 2017" class="rcWeekend"><a href="#">2</a></td><td title="domingo, septiembre 03, 2017" class="rcWeekend"><a href="#">3</a></td><br>                                </tr><tr class="rcRow"><br>                                    <th id="FechaConcesionDatePicker_calendar_Top_rs_2" scope="row">37</th><td title="lunes, septiembre 04, 2017"><a href="#">4</a></td><td title="martes, septiembre 05, 2017"><a href="#">5</a></td><td title="miércoles, septiembre 06, 2017"><a href="#">6</a></td><td title="jueves, septiembre 07, 2017"><a href="#">7</a></td><td title="viernes, septiembre 08, 2017"><a href="#">8</a></td><td title="sábado, septiembre 09, 2017" class="rcWeekend"><a href="#">9</a></td><td title="domingo, septiembre 10, 2017" class="rcWeekend"><a href="#">10</a></td><br>                                </tr><tr class="rcRow"><br>                                    <th id="FechaConcesionDatePicker_calendar_Top_rs_3" scope="row">38</th><td title="lunes, septiembre 11, 2017"><a href="#">11</a></td><td title="martes, septiembre 12, 2017"><a href="#">12</a></td><td title="miércoles, septiembre 13, 2017"><a href="#">13</a></td><td title="jueves, septiembre 14, 2017"><a href="#">14</a></td><td title="viernes, septiembre 15, 2017"><a href="#">15</a></td><td title="sábado, septiembre 16, 2017" class="rcWeekend"><a href="#">16</a></td><td title="domingo, septiembre 17, 2017" class="rcWeekend"><a href="#">17</a></td><br>                                </tr><tr class="rcRow"><br>                                    <th id="FechaConcesionDatePicker_calendar_Top_rs_4" scope="row">39</th><td title="lunes, septiembre 18, 2017"><a href="#">18</a></td><td title="martes, septiembre 19, 2017"><a href="#">19</a></td><td title="miércoles, septiembre 20, 2017"><a href="#">20</a></td><td title="jueves, septiembre 21, 2017"><a href="#">21</a></td><td title="viernes, septiembre 22, 2017"><a href="#">22</a></td><td title="sábado, septiembre 23, 2017" class="rcWeekend"><a href="#">23</a></td><td title="domingo, septiembre 24, 2017" class="rcWeekend"><a href="#">24</a></td><br>                                </tr><tr class="rcRow"><br>                                    <th id="FechaConcesionDatePicker_calendar_Top_rs_5" scope="row">40</th><td title="lunes, septiembre 25, 2017"><a href="#">25</a></td><td title="martes, septiembre 26, 2017"><a href="#">26</a></td><td title="miércoles, septiembre 27, 2017"><a href="#">27</a></td><td title="jueves, septiembre 28, 2017"><a href="#">28</a></td><td title="viernes, septiembre 29, 2017"><a href="#">29</a></td><td title="sábado, septiembre 30, 2017" class="rcWeekend"><a href="#">30</a></td><td title="domingo, octubre 01, 2017" class="rcOtherMonth"><a href="#">1</a></td><br>                                </tr><tr class="rcRow"><br>                                    <th id="FechaConcesionDatePicker_calendar_Top_rs_6" scope="row">41</th><td title="lunes, octubre 02, 2017" class="rcOtherMonth"><a href="#">2</a></td><td title="martes, octubre 03, 2017" class="rcOtherMonth"><a href="#">3</a></td><td title="miércoles, octubre 04, 2017" class="rcOtherMonth"><a href="#">4</a></td><td title="jueves, octubre 05, 2017" class="rcOtherMonth"><a href="#">5</a></td><td title="viernes, octubre 06, 2017" class="rcOtherMonth"><a href="#">6</a></td><td title="sábado, octubre 07, 2017" class="rcOtherMonth"><a href="#">7</a></td><td title="domingo, octubre 08, 2017" class="rcOtherMonth"><a href="#">8</a></td><br>                                </tr><br>                            </tbody><br>                        </table><br>                    </div><input name="FechaConcesionDatePicker_calendar_SD" id="FechaConcesionDatePicker_calendar_SD" type="hidden" value="[]"><input name="FechaConcesionDatePicker_calendar_AD" id="FechaConcesionDatePicker_calendar_AD" type="hidden" value="[[1980,1,1],[2099,12,30],[2017,9,12]]"><br>                </div><br>            </div><input name="FechaConcesionDatePicker_dateInput_ClientState" id="FechaConcesionDatePicker_dateInput_ClientState" type="hidden" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1980-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}' autocomplete="off"><br>        </div><input name="FechaConcesionDatePicker_ClientState" id="FechaConcesionDatePicker_ClientState" type="hidden" autocomplete="off"><br>    </div>

in serverside

<div class="RadPicker RadPicker_Vista" id="FechaConcesionDatePicker_wrapper" style="width: 95px; display: inline-block; -ms-zoom: 1;">
        <input name="FechaConcesionDatePicker" title="Visually hidden input created for functionality purposes." class="rdfd_ radPreventDecorate" id="FechaConcesionDatePicker" style="margin: 0px 0px -1px -1px; padding: 0px; border: 0px currentColor; border-image: none; width: 1px; height: 1px; overflow: hidden; float: right; display: block; visibility: hidden;" type="text" value=""><table class="rcTable rcSingle" style="width: 100%;" cellspacing="0" summary="Table holding date picker control for selection of dates.">
            <caption style="display: none;">
                RadDatePicker
            </caption><thead style="display: none;">
                <tr>
                    <th scope="col">RadDatePicker</th>
                </tr>
            </thead><tbody>
                <tr>
                    <td class="rcInputCell" style="width: 100%;"><span class="riSingle RadInput RadInput_Vista" id="FechaConcesionDatePicker_dateInput_wrapper" style="width: 100%; display: block;"><input name="FechaConcesionDatePicker$dateInput" class="riTextBox riEnabled" id="FechaConcesionDatePicker_dateInput" type="text"><input name="FechaConcesionDatePicker_dateInput_ClientState" id="FechaConcesionDatePicker_dateInput_ClientState" type="hidden" value='{"enabled":true,"emptyMessage":"","validationText":"","valueAsString":"","minDateStr":"1980-01-01-00-00-00","maxDateStr":"2099-12-31-00-00-00","lastSetTextBoxValue":""}' autocomplete="off"></span></td><td><a title="Open the calendar popup." class="rcCalPopup" id="FechaConcesionDatePicker_popupButton" href="#">Open the calendar popup.</a><div id="FechaConcesionDatePicker_calendar_wrapper" style="display: none;">
                        <table class="RadCalendar RadCalendar_Vista" id="FechaConcesionDatePicker_calendar" cellspacing="0">
                            <caption>
                                <span style="display: none;">Calendar</span>
                            </caption><thead>
                                <tr>
                                    <td class="rcTitlebar"><table cellspacing="0">
                                        <caption>
                                            <span style="display: none;">Title and navigation</span>
                                        </caption><thead>
                                            <tr style="display: none;">
                                                <th scope="col">Title and navigation</th>
                                            </tr>
                                        </thead><tbody>
    <tr>
        <td><a title="<<" class="t-button rcFastPrev" id="FechaConcesionDatePicker_calendar_FNP" href="#"><<</a></td><td><a title="<" class="t-button rcPrev" id="FechaConcesionDatePicker_calendar_NP" href="#"><</a></td><td class="rcTitle" id="FechaConcesionDatePicker_calendar_Title">septiembre de 2017</td><td><a title=">" class="t-button rcNext" id="FechaConcesionDatePicker_calendar_NN" href="#">></a></td><td><a title=">>" class="t-button rcFastNext" id="FechaConcesionDatePicker_calendar_FNN" href="#"><<</a></td>
    </tr>
</tbody>
                                    </table></td>
                                </tr>
                            </thead><tbody>
    <tr>
        <td class="rcMain"><table class="rcMainTable" id="FechaConcesionDatePicker_calendar_Top" cellspacing="0">
    <caption>
        <span style="display: none;">septiembre de 2017</span>
    </caption><thead>
        <tr class="rcWeek">
            <th class="rcViewSel" scope="col"> </th><th title="lunes" id="FechaConcesionDatePicker_calendar_Top_cs_1" scope="col">l</th><th title="martes" id="FechaConcesionDatePicker_calendar_Top_cs_2" scope="col">m</th><th title="miércoles" id="FechaConcesionDatePicker_calendar_Top_cs_3" scope="col">m</th><th title="jueves" id="FechaConcesionDatePicker_calendar_Top_cs_4" scope="col">j</th><th title="viernes" id="FechaConcesionDatePicker_calendar_Top_cs_5" scope="col">v</th><th title="sábado" id="FechaConcesionDatePicker_calendar_Top_cs_6" scope="col">s</th><th title="domingo" id="FechaConcesionDatePicker_calendar_Top_cs_7" scope="col">d</th>
        </tr>
    </thead><tbody>
        <tr class="rcRow">
            <th id="FechaConcesionDatePicker_calendar_Top_rs_1" scope="row">36</th><td title="lunes, agosto 28, 2017" class="rcOtherMonth"><a href="#">28</a></td><td title="martes, agosto 29, 2017" class="rcOtherMonth"><a href="#">29</a></td><td title="miércoles, agosto 30, 2017" class="rcOtherMonth"><a href="#">30</a></td><td title="jueves, agosto 31, 2017" class="rcOtherMonth"><a href="#">31</a></td><td title="viernes, septiembre 01, 2017"><a href="#">1</a></td><td title="sábado, septiembre 02, 2017" class="rcWeekend"><a href="#">2</a></td><td title="domingo, septiembre 03, 2017" class="rcWeekend"><a href="#">3</a></td>
        </tr><tr class="rcRow">
            <th id="FechaConcesionDatePicker_calendar_Top_rs_2" scope="row">37</th><td title="lunes, septiembre 04, 2017"><a href="#">4</a></td><td title="martes, septiembre 05, 2017"><a href="#">5</a></td><td title="miércoles, septiembre 06, 2017"><a href="#">6</a></td><td title="jueves, septiembre 07, 2017"><a href="#">7</a></td><td title="viernes, septiembre 08, 2017"><a href="#">8</a></td><td title="sábado, septiembre 09, 2017" class="rcWeekend"><a href="#">9</a></td><td title="domingo, septiembre 10, 2017" class="rcWeekend"><a href="#">10</a></td>
        </tr><tr class="rcRow">
            <th id="FechaConcesionDatePicker_calendar_Top_rs_3" scope="row">38</th><td title="lunes, septiembre 11, 2017"><a href="#">11</a></td><td title="martes, septiembre 12, 2017"><a href="#">12</a></td><td title="miércoles, septiembre 13, 2017"><a href="#">13</a></td><td title="jueves, septiembre 14, 2017"><a href="#">14</a></td><td title="viernes, septiembre 15, 2017"><a href="#">15</a></td><td title="sábado, septiembre 16, 2017" class="rcWeekend"><a href="#">16</a></td><td title="domingo, septiembre 17, 2017" class="rcWeekend"><a href="#">17</a></td>
        </tr><tr class="rcRow">
            <th id="FechaConcesionDatePicker_calendar_Top_rs_4" scope="row">39</th><td title="lunes, septiembre 18, 2017"><a href="#">18</a></td><td title="martes, septiembre 19, 2017"><a href="#">19</a></td><td title="miércoles, septiembre 20, 2017"><a href="#">20</a></td><td title="jueves, septiembre 21, 2017"><a href="#">21</a></td><td title="viernes, septiembre 22, 2017"><a href="#">22</a></td><td title="sábado, septiembre 23, 2017" class="rcWeekend"><a href="#">23</a></td><td title="domingo, septiembre 24, 2017" class="rcWeekend"><a href="#">24</a></td>
        </tr><tr class="rcRow">
            <th id="FechaConcesionDatePicker_calendar_Top_rs_5" scope="row">40</th><td title="lunes, septiembre 25, 2017"><a href="#">25</a></td><td title="martes, septiembre 26, 2017"><a href="#">26</a></td><td title="miércoles, septiembre 27, 2017"><a href="#">27</a></td><td title="jueves, septiembre 28, 2017"><a href="#">28</a></td><td title="viernes, septiembre 29, 2017"><a href="#">29</a></td><td title="sábado, septiembre 30, 2017" class="rcWeekend"><a href="#">30</a></td><td title="domingo, octubre 01, 2017" class="rcOtherMonth"><a href="#">1</a></td>
        </tr><tr class="rcRow">
            <th id="FechaConcesionDatePicker_calendar_Top_rs_6" scope="row">41</th><td title="lunes, octubre 02, 2017" class="rcOtherMonth"><a href="#">2</a></td><td title="martes, octubre 03, 2017" class="rcOtherMonth"><a href="#">3</a></td><td title="miércoles, octubre 04, 2017" class="rcOtherMonth"><a href="#">4</a></td><td title="jueves, octubre 05, 2017" class="rcOtherMonth"><a href="#">5</a></td><td title="viernes, octubre 06, 2017" class="rcOtherMonth"><a href="#">6</a></td><td title="sábado, octubre 07, 2017" class="rcOtherMonth"><a href="#">7</a></td><td title="domingo, octubre 08, 2017" class="rcOtherMonth"><a href="#">8</a></td>
        </tr>
    </tbody>
</table></td>
    </tr>
</tbody>
                        </table><input name="FechaConcesionDatePicker_calendar_SD" id="FechaConcesionDatePicker_calendar_SD" type="hidden" value="[]"><input name="FechaConcesionDatePicker_calendar_AD" id="FechaConcesionDatePicker_calendar_AD" type="hidden" value="[[1980,1,1],[2099,12,30],[2017,9,12]]">
                    </div></td>
                </tr>
            </tbody>
        </table><input name="FechaConcesionDatePicker_ClientState" id="FechaConcesionDatePicker_ClientState" type="hidden" autocomplete="off">
    </div>

So first the class of whole datepicker changes and some elements inside has distinct structure

Here is the datepicker

<div class="input-group" style="margin-left: 15px; margin-top: 15px;">
                <span class="input-group-addon">Fecha concesión: </span>
                <asp:Label CssClass="form-control" ID="FechaLabel" Width="302px" runat="server"></asp:Label>
                <telerik:RadDatePicker RenderMode="Lightweight" ID="FechaConcesionDatePicker" Width="95px" OnSelectedDateChanged="FechaConcesionDatePicker_SelectedDateChanged" AutoPostBack="true" runat="server">
                    <Calendar runat="server">
                        <FastNavigationSettings CancelButtonCaption="Cerrar" TodayButtonCaption="Hoy"></FastNavigationSettings>
                    </Calendar>
                </telerik:RadDatePicker>
                <asp:ImageButton runat="server" ID="resetDateButton" OnClick="resetDateButton_Click" ImageUrl="icons/clear.png" ImageAlign="AbsMiddle" />
            </div>


        .RadInput {
            width: 85px !important;
            height: 34px !important;
        }

        .rcCalPopup {
            width: 75px !important;
        }

So why is it changing it's content? how do i do to view the same in localhost than in serverside?

1 Answer, 1 is accepted

Sort by
0
Arnau
Top achievements
Rank 1
answered on 12 Sep 2017, 11:04 AM

Added html files tabbed

http://text-share.com/view/8a48ca56

http://text-share.com/view/0842446f

 

Tags
DatePicker
Asked by
Arnau
Top achievements
Rank 1
Answers by
Arnau
Top achievements
Rank 1
Share this question
or