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

RadTimePicker in IE sets wrong time when using Vertical and Footer

3 Answers 70 Views

Calendar

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

Jonathan asked on 02 Jun 2011, 08:12 PM

I have created an instance of a RadTimePicker with RenderDirection="Vertical" and using a footer template. Then when I pick a time in the time picker control in column 2 or 3 it changes the time ahead by 30 minutes. Eg. if I pick 10:00 AM it closes the popup and puts 10:30 AM in the text box.

After extensive testing and trying to isolate and recreate the issue I've found that the problem goes away if

- I don't use IE 8 (use Firefox or Chrome instead)
- Use a Render Direction = Horizontal
- Don't use a footer template on the timepicker popup

Additionally when I open the popup again - it actually displays the correct time in the popup.

Please let me know if there is something I have overlooked that can correct this behaviour without using any of the options I listed above which aren't what we want to have to do.

Is there an e-mail address I could submit a copy of my test application that displays this behaviour to? I can't attach a zip to this...

Thanks,

Jonathan

Main code for the page displays below: (there is no code-behind code)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

<Scripts>

<%--Needed for JavaScript IntelliSense in VS2010--%>

<%--For VS2008 replace RadScriptManager with ScriptManager--%>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />

</Scripts>

</telerik:RadScriptManager>

<script type="text/javascript">

//Put your JavaScript code here.

</script>

<div>

<telerik:RadTimePicker ID="tme_startTime" runat="server" Skin="Vista"

Culture="en-CA" AutoPostBack="false" AutoPostBackControl="TimeView">

<Calendar ID="Calendar1" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>

<DatePopupButton Visible="False" CssClass="" ImageUrl="" HoverImageUrl=""></DatePopupButton>

<TimeView ID="TimeView1" ShowHeader="false" CellSpacing="-1" Culture="en-CA" Interval="00:30:00" RenderDirection="Vertical" HeaderText="" runat="server">

<FooterTemplate>

<button onclick="javascript: ClosePopup(); return false;">Close</button>

</FooterTemplate>

</TimeView>

<TimePopupButton CssClass="" ImageUrl="" HoverImageUrl=""></TimePopupButton>

<DateInput Width="" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy"

AutoPostBack="false"></DateInput>

<ShowAnimation Type="Slide" />

<HideAnimation Type="Slide" />

</telerik:RadTimePicker>

44

<br />

66

<telerik:RadTimePicker ID="RadTimePicker1" runat="server" Skin="Vista"

Culture="en-CA" AutoPostBack="false" AutoPostBackControl="TimeView">

<Calendar ID="Calendar2" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" runat="server"></Calendar>

<DatePopupButton Visible="False" CssClass="" ImageUrl="" HoverImageUrl=""></DatePopupButton>

<TimeView ID="TimeView3" CellSpacing="-1" Culture="en-CA" Interval="00:30:00" RenderDirection="Vertical" HeaderText="" runat="server">

<FooterTemplate>

</FooterTemplate>

</TimeView>

<TimePopupButton CssClass="" ImageUrl="" HoverImageUrl=""></TimePopupButton>

<DateInput Width="" DisplayDateFormat="dd/MM/yyyy" DateFormat="dd/MM/yyyy"

AutoPostBack="false"></DateInput>

<ShowAnimation Type="Slide" />

<HideAnimation Type="Slide" />

</telerik:RadTimePicker>

<br />

<telerik:RadTimePicker ID="RadTimePicker3" runat="server" AutoPostBack="false" >

<TimeView ID="TimeView2" Interval="00:30:00" HeaderText="" RenderDirection="Vertical" runat="server">

<FooterTemplate>

g

</FooterTemplate>

</TimeView>

</telerik:RadTimePicker>

88

<br />

<telerik:RadTimePicker ID="RadTimePicker2" runat="server" AutoPostBack="false" >

<TimeView ID="TimeView4" Interval="00:30:00" HeaderText="" runat="server">

<FooterTemplate>

g

</FooterTemplate>

</TimeView>

</telerik:RadTimePicker>

36

</div>

</form>

</body>

</html>

3 Answers, 1 is accepted

Accepted

answered on 08 Jun 2011, 08:43 PM

Hi Jonathan,

You can try using the following code as workaround:

<telerik:RadCodeBlock runat="server">

<script type="text/javascript">

Telerik.Web.UI.RadTimeView.prototype.initialize = function () {

Telerik.Web.UI.RadTimeView.callBaseMethod(this, "initialize");

this.DivElement = $get(this.get_id());

var searchedText = '"rcFooter"';

if ($telerik.isIE8 || $telerik.isIE7) {

searchedText = searchedText.replace(/"/gi, "");

}

if (this.get_showFooter() && this.DivElement.innerHTML.indexOf(searchedText) == -1) {

this.set_showFooter(false);

} this._timeMatrix = this._setTimeMatrix();

this._tempStyle = null;

this._attachEventHandlers();

}

</script>

</telerik:RadCodeBlock>

Regards,
F