RadDatePicker enable disable issue in IE8 and Mozilla

[Hemamalini]

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.

[Vasil]

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

[Ram]

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

[Vasil]

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

[Ram]

<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.

[Ram]

<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.

[Vasil]

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

[Ram]

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

[Pavel]

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

[Ram]

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.

[Vasil]

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