RadDatePicker enable disable issue in IE8 and Mozilla

11 posts, 0 answers
  1. Hemamalini
    Hemamalini avatar
    35 posts
    Member since:
    Jul 2010

    Posted 15 Jun 2011 Link to this post

    Hi,

        We are using telerik version 2011.1.413.35. We use telerik RadDatePicker. My criteria is to enable or disable DatePopUpButton based on the check in the check box. The following code i have used,
    <asp:CheckBox ID="CheckBoxNoExpiration" runat="server" Text="No Expiration" Checked="true"
                                            CssClass="chkBox" onclick="javascript:return ToggleDatePicker();" />
    <telerik:RadDatePicker DateInput-DisplayDateFormat="MM/dd/yyyy" ID="RadExpiryDate"
                                            EnableEmbeddedSkins="false" Skin="Web20" Culture="en-US" Width="100px" MinDate="01/01/1900"
                                            runat="server" TabIndex="11">
                                            <Calendar ID="Calendar1" runat="server" EnableEmbeddedSkins="false" ShowOtherMonthsDays="false"
                                                ShowRowHeaders="false" Skin="Web20" BorderWidth="1">
                                                <SpecialDays>
                                                    <telerik:RadCalendarDay Repeatable="Today" Date="">
                                                        <ItemStyle BackColor="#E0F0FF" BorderColor="Gray" />
                                                    </telerik:RadCalendarDay>
                                                </SpecialDays>
                                            </Calendar>
                                            <DateInput runat="server" ID="radDateExpiry" DateFormat="MM/dd/yyyy" Culture="en-US"
                                                MaxLength="10" ReadOnly="false" MinDate="01/01/1900" Style="height: 16px; background: white;
                                                padding-top: 3px; border: 1px solid #7F9DB9; text-align: left; margin-top: 1px;
                                                font-size: 13px; font-family: Verdana, Verdana, Sans-Serif; color: black;">
                                            </DateInput>
                                            <DatePopupButton HoverImageUrl="../Images/calendar.png" ImageUrl="../Images/calendar.png"
                                                Enabled="false" />
                                        </telerik:RadDatePicker>

    The scripts for enabling and disabling DateInput and DatePopUpButton are,

    function ToggleDatePicker() {
                                        setTimeout(SetEnablePropertyToExpDate, 100);
                 }
                 function SetEnablePropertyToExpDate() {
                     setTimeout(SetEnablePropertyToExpDate, 100);
                     var CheckBoxNoExpiration = document.getElementById('<%= CheckBoxNoExpiration.ClientID %>');
                     var DatePicker = $find('<%= RadExpiryDate.ClientID %>');
                     var MandatoryMark = document.getElementById('<%= MandatoryMark.ClientID %>');
                     if (CheckBoxNoExpiration != null) {
                         if (CheckBoxNoExpiration.checked) {
                             if (MandatoryMark != null)
                                 MandatoryMark.style.display = 'none';
                             DatePicker.get_dateInput().disable();
                             DatePicker.get_dateInput.onclick = function() { return false; };
                             DatePicker._popupButton.disabled = true;
                             DatePicker._popupButton.onclick = function() { return false; };
                         }
                         else {
                             if (MandatoryMark != null)
                                 MandatoryMark.style.display = 'inline';
                             DatePicker.get_dateInput().enable();
                             DatePicker._popupButton.disabled = false;
                             DatePicker._popupButton.onclick = function() { DatePicker.togglePopup(); return false; };
                         }
                     }
                 }

    My problem is the DateInputButton shown as disbled in firefox irrespective of the check. but i can click the popup and retrieve the date. only the appearance shows as disabled. In IE8 the appearance of the DateInputButton is shown as enabled irrespective of the check.  Is there any way to solve this? Please guide me.

    Thanks,
    Hema.
  2. Vasil
    Admin
    Vasil avatar
    1638 posts

    Posted 20 Jun 2011 Link to this post

    Hi Hemamalini,

    Here is an example how to show/hide the popup button:
    <telerik:RadScriptBlock runat="server">
      <script type="text/javascript">
     
        var prevDisplay = "none";
     
        function ToggleDatePicker() {
          var datePicker = $find('<%= RadExpiryDate.ClientID %>');
          var button = datePicker.get_popupButton();
          var tmp = button.style.display;
          button.style.display = prevDisplay;
          prevDisplay = tmp;
        }
     
      </script>
    </telerik:RadScriptBlock>
    <div>
      <asp:CheckBox ID="CheckBoxNoExpiration" runat="server" Text="Show button" Checked="true"
        CssClass="chkBox" onclick="ToggleDatePicker()" />
      <br />
      <telerik:RadDatePicker ID="RadExpiryDate" runat="server">
      </telerik:RadDatePicker>

    I hope this helps.

    Kind regards,
    Vasil
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 07 Jul 2011 Link to this post

    Hi
    I',using Raddatetimepicker.
    1)I have set image for Both Timepopup button and Datepopup button.
    But
    I'm seeing blue border for both images in IE8.
    In firefox is ok.
    Clould you pls answer me How to solve the issue.
    2)Can I place calender image inside the caleder text box istead of next to the textbox.
    Thanks in advance
  4. Vasil
    Admin
    Vasil avatar
    1638 posts

    Posted 07 Jul 2011 Link to this post

    Hi Ram,

    Could you give us more information about the issue? How do you set the images? Which skin do you use?
    It will be helpful if you send a screenshots in both IE8 and Firefox to see what is the difference.  Also if it is possible please share the code that you use.

    Greetings,
    Vasil
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  5. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 08 Jul 2011 Link to this post

    <asp:TableRow>
            <asp:TableCell>
            <asp:Label ID="begnDatelbl" runat="server"  Text="Begin Date:" CssClass="filterLbl" />
            </asp:TableCell><asp:TableCell>
            <telerik:RadDateTimePicker ID="begnDate" runat="server"   Width="84%" Height="10px" style="margin-top:-4px;">
             <HideAnimation Type="Slide" />
             <ShowAnimation Type="Slide" />
             <DatePopupButton ImageUrl="../images/Cal_iconj.gif" HoverImageUrl="../images/Cal_iconj.gif"/>
             <TimePopupButton ImageUrl="../images/watch.gif" HoverImageUrl="../images/watch.gif"/>
             </telerik:RadDateTimePicker>
            </asp:TableCell><asp:TableCell>
             <asp:Label ID="endDatelbl" runat="server"  Text="End Date:" CssClass="filterLbl"/>
             </asp:TableCell><asp:TableCell>
             <telerik:RadDateTimePicker ID="endDate" runat="server"  Width="84%" Height="10px" style="margin-top:-4px;">
              <HideAnimation Type="Slide" />
              <ShowAnimation Type="Slide" />
              <DatePopupButton ImageUrl="../images/Cal_iconj.gif" HoverImageUrl="../images/Cal_iconj.gif"/>
              <TimePopupButton ImageUrl="../images/watch.gif" HoverImageUrl="../images/watch.gif"/>
             </telerik:RadDateTimePicker>  
             </asp:TableCell></asp:TableRow><asp:TableRow>
           <asp:TableCell>
           <asp:Label ID="CalDirectlbl" runat="server" Text="Call Direction:" CssClass="filterLbl"/>
           </asp:TableCell><asp:TableCell>
           <asp:DropDownList ID="calDirect_ddl" runat="server" CssClass="dropDwnlist">
           <asp:ListItem Value="0" Selected="True" >InBound</asp:ListItem>
                                <asp:ListItem Value="1">OutBound</asp:ListItem>
                                <asp:ListItem Value ="2" >Both</asp:ListItem>
           </asp:DropDownList>
           </asp:TableCell><asp:TableCell>
           <asp:Label ID="groupByLbl" runat="server" Text="Group By:" CssClass="filterLbl"/>
           </asp:TableCell><asp:TableCell>
           <asp:DropDownList ID="groupby_ddl" runat="server"  CssClass="dropDwnlist">
           <asp:ListItem Value="0" Selected="True" >Console</asp:ListItem>
                                <asp:ListItem Value="1">Endpoint</asp:ListItem>
                                <asp:ListItem Value ="3" >Date</asp:ListItem>
                                <asp:ListItem Value ="4" >Dispatcher</asp:ListItem>
                                <asp:ListItem Value ="5" >Call Type</asp:ListItem>
           </asp:DropDownList>
            </asp:TableCell><asp:TableCell>
           <asp:ImageButton  ID="generateReprtBtn" runat="server" ImageUrl="~/images/report.gif"  CssClass="imageButton"
                    onclick="generateReprtBtn_Click"/>
           </asp:TableCell></asp:TableRow></asp:Table>

    This is my code, even I set the skin there is no chage . I'm getting blue border for both calender and time images in IE8 but in firefox its ok.
  6. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 08 Jul 2011 Link to this post

    <asp:TableRow>
            <asp:TableCell>
            <asp:Label ID="begnDatelbl" runat="server"  Text="Begin Date:" CssClass="filterLbl" />
            </asp:TableCell><asp:TableCell>
            <telerik:RadDateTimePicker ID="begnDate" runat="server"   Width="84%" Height="10px" style="margin-top:-4px;">
             <HideAnimation Type="Slide" />
             <ShowAnimation Type="Slide" />
             <DatePopupButton ImageUrl="../images/Cal_iconj.gif" HoverImageUrl="../images/Cal_iconj.gif"/>
             <TimePopupButton ImageUrl="../images/watch.gif" HoverImageUrl="../images/watch.gif"/>
             </telerik:RadDateTimePicker>
            </asp:TableCell><asp:TableCell>
             <asp:Label ID="endDatelbl" runat="server"  Text="End Date:" CssClass="filterLbl"/>
             </asp:TableCell><asp:TableCell>
             <telerik:RadDateTimePicker ID="endDate" runat="server"  Width="84%" Height="10px" style="margin-top:-4px;">
              <HideAnimation Type="Slide" />
              <ShowAnimation Type="Slide" />
              <DatePopupButton ImageUrl="../images/Cal_iconj.gif" HoverImageUrl="../images/Cal_iconj.gif"/>
              <TimePopupButton ImageUrl="../images/watch.gif" HoverImageUrl="../images/watch.gif"/>
             </telerik:RadDateTimePicker>  
             </asp:TableCell></asp:TableRow><asp:TableRow>
           <asp:TableCell>
           <asp:Label ID="CalDirectlbl" runat="server" Text="Call Direction:" CssClass="filterLbl"/>
           </asp:TableCell><asp:TableCell>
           <asp:DropDownList ID="calDirect_ddl" runat="server" CssClass="dropDwnlist">
           <asp:ListItem Value="0" Selected="True" >InBound</asp:ListItem>
                                <asp:ListItem Value="1">OutBound</asp:ListItem>
                                <asp:ListItem Value ="2" >Both</asp:ListItem>
           </asp:DropDownList>
           </asp:TableCell><asp:TableCell>
           <asp:Label ID="groupByLbl" runat="server" Text="Group By:" CssClass="filterLbl"/>
           </asp:TableCell><asp:TableCell>
           <asp:DropDownList ID="groupby_ddl" runat="server"  CssClass="dropDwnlist">
           <asp:ListItem Value="0" Selected="True" >Console</asp:ListItem>
                                <asp:ListItem Value="1">Endpoint</asp:ListItem>
                                <asp:ListItem Value ="3" >Date</asp:ListItem>
                                <asp:ListItem Value ="4" >Dispatcher</asp:ListItem>
                                <asp:ListItem Value ="5" >Call Type</asp:ListItem>
           </asp:DropDownList>
            </asp:TableCell><asp:TableCell>
           <asp:ImageButton  ID="generateReprtBtn" runat="server" ImageUrl="~/images/report.gif"  CssClass="imageButton"
                    onclick="generateReprtBtn_Click"/>
           </asp:TableCell></asp:TableRow></asp:Table>

    This is my code, even I set the skin there is no chage . I'm getting blue border for both calender and time images in IE8 but in firefox its ok.
  7. Vasil
    Admin
    Vasil avatar
    1638 posts

    Posted 11 Jul 2011 Link to this post

    Hi Ram,

    I prepared sample web site based on your code and two images. It works properly in both Firefox and IE8. Please see the attached archive.

    Kind regards,
    Vasil
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  8. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 15 Jul 2011 Link to this post

    Hi,
    Thanks for reply.
    But you have cheked for firefox and IE9  I think.
    But I'm getting problem in IE8.
    I applied css files by setting the border-width:0 evnthough its not working.
    pls find my attached screen in IE8 and firefox.
    pls help me as early as possible
  9. Pavel
    Admin
    Pavel avatar
    904 posts

    Posted 15 Jul 2011 Link to this post

    Hi Ram,

    Indeed the problem exists in IE8. You can workaround it with the following CSS:
    <style type="text/css">
        .rcTable a img
        {
            border:0 none;   
        }
    </style>


    Greetings,
    Pavel
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  10. Ram
    Ram avatar
    97 posts
    Member since:
    Jun 2011

    Posted 15 Jul 2011 Link to this post

    Hi Pavel.
    Really Thanks very Much Is working fine for me.
    Cloud you say
    1) How to highlight the current(todays) date in calender.
    2)Can I place the calender image inside the texbox(date) rightside. Really its mandatory for me.
  11. Vasil
    Admin
    Vasil avatar
    1638 posts

    Posted 18 Jul 2011 Link to this post

    Hello Ram,

    Here is an example how to change the appearance of current(today) date:
    http://demos.telerik.com/aspnet-ajax/calendar/examples/functionality/today/defaultcs.aspx
    Also you could see the documentation for more information.

    The calendar popup button of the RadDatePicker can't be placed inside the textbox. But you can style it such a way that to looks like it is inside.

    CSS:
    <style type="text/css">
       div .RadPicker .rcCalPopup
       {
         left: -25px;
         position: relative;
       }
     </style>

    Kind regards,
    Vasil
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

Back to Top