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

[Solved] RadTimePicker setTime() not working if two time pickers are there in page

3 Answers 356 Views

Calendar

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

Dev asked on 28 Feb 2014, 12:23 PM

Hello there,

I am using telerik controls for ASP.NET AJAX version 2012.1.515.35.

I do have a page in which I have taken two RadTimePicker Controls. My requirement is when user sets time of first time picker (whether selected from time-view or entered manually) from client-side, it should set the same time for all of the other time-pickers.

Everything is working fine, but 3 days ago I discovered a new bug.

If I enter time manually in time-picker one and click on input-area of other time-picker then it will set the whole date in the other time-picker's input area. I have tried a lot to resolve it and finally I come to you.

Steps of re-production :

1) Run the page pasted below :
2) In "All" time picker manually type "03:00" using key-board.
3) Click on "Other" time-picker's time-input area.

Sample aspx file :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="timepicker.aspx.cs" Inherits="Oops_testing.timepicker" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

<script src="scripts/jquery-ui-1.8.2.js"></script>

</head>

<body>

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

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

//<![CDATA[

function hideTimePopup(pickerName) {

if (pickerName == "rtpAll") {

var rtpPicker = $find("<%= rtpAll.ClientID %>");

rtpPicker.hideTimePopup();

}

else if (pickerName == "rtpOne") {

var rtpPicker = $find("<%= rtpOne.ClientID %>");

var textBox = rtpPicker.get_textBox();

if (textBox.value == "") {

weightManuallySelected = false;

}

else {

weightManuallySelected = true;

}

rtpPicker.hideTimePopup();

}

function enterDateTime() {

var rtpPicker = $find("<%= rtpAll.ClientID %>");

var rtpPickerMaxdate = rtpPicker.get_maxDate();

var textBox = rtpPicker.get_textBox();

setTimeout(function () {

if (textBox.value == "") {

rtpPicker.hideTimePopup();

return;

}

var splt = textBox.value.split(":");

var hour = rtpPicker.get_timeView().getTime().getHours();

var min = rtpPicker.get_timeView().getTime().getMinutes();

var time = new Date();

if (typeof hour == 'undefined' || parseInt(hour) == Number.NaN) {

return;

}

if (typeof min == 'undefined' || parseInt(min) == Number.NaN) {

min = 0;

}

if (hour > 23 || min > 59) {

return;

}

rtpPicker.hideTimePopup();

if (rtpPickerMaxdate < time) {

return;

}

var WeightTimePicker = $find("<%= rtpOne.ClientID %>");

if (WeightTimePicker != null && WeightTimePicker != undefined) {

if (WeightTimePicker.isEmpty() || weightManuallySelected == false) {

WeightTimePicker.get_timeView().setTime(hour, min, 0, time);

}

}, 100);

}

function OnClientTimeSelected(sender, e) {

var time = e.get_newTime();

var WeightTimePicker = $find("<%= rtpOne.ClientID %>");

if (WeightTimePicker != null && WeightTimePicker != undefined) {

if (WeightTimePicker.isEmpty() || weightManuallySelected == false) {

WeightTimePicker.get_timeView().setTime(time.getHours(), time.getMinutes(), time.getSeconds(), time);

}

var weightManuallySelected = false;

function OnWeightTimeSelected(sender, e) {

weightManuallySelected = true;

}

//]]>

</script>

</telerik:RadScriptBlock>

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

</telerik:RadScriptManager>

All : <telerik:RadTimePicker ID="rtpAll" runat="server" Width="85" DateInput-DateFormat="HH:mm" TimeView-TimeFormat="HH:mm" Skin="Hay">

<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">

</Calendar>

<TimeView CellSpacing="-1" TimeFormat="HH:mm" OnClientTimeSelected="OnClientTimeSelected">

</TimeView>

<TimePopupButton CssClass="" ImageUrl="" HoverImageUrl="" onblur="hideTimePopup('rtpAll');"></TimePopupButton>

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

<DateInput CssClass="txtbox txtBack-Color" BorderColor="#D0D1AE" BorderStyle="Solid" Width="800"

BorderWidth="1" ForeColor="#333333" onblur="enterDateTime();">

</DateInput>

</telerik:RadTimePicker>

<br />

Other : <telerik:RadTimePicker ID="rtpOne" runat="server" Width="85" DateInput-DateFormat="HH:mm" DateInput-DisplayDateFormat="HH:mm"

TimeView-TimeFormat="HH:mm" Skin="Hay">

<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">

</Calendar>

<TimeView CellSpacing="-1" TimeFormat="HH:mm" OnClientTimeSelected="OnWeightTimeSelected">

</TimeView>

<TimePopupButton CssClass="" ImageUrl="" HoverImageUrl="" onblur="hideTimePopup('rtpOne');"></TimePopupButton>

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

<DateInput CssClass="txtbox txtBack-Color" BorderColor="#D0D1AE" BackColor="#F5F5F5" DisplayDateFormat="HH:mm" Width="800"

BorderStyle="Solid" BorderWidth="1" ForeColor="#333333" onblur="hideTimePopup('rtpOne');">

</DateInput>

</telerik:RadTimePicker>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="rdpVitals">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="rtpAll" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</form>

</body>

</html>

Please let me know how to get rid of this bug?

Thanks.

3 Answers, 1 is accepted

answered on 05 Mar 2014, 05:30 AM

timepicker_bug.png

Hello Telerik Team,

Do you people have any solution for the same?

I am awaiting for your valuable response. I have attached the image of time-picker showing date even if its display format is set to show the time only.

Thanks,
Dev

answered on 05 Mar 2014, 09:09 AM

Hi Dev,

The issue you describe could be observed in older versions of our controls, however the issue has been fixed. I tested your code with the latest version of our controls and the time in the second RadTimePicker seems to be set as expected. I made a short video as reference that is available here.

Try upgrading the controls to the latest release (currently 2014.1.225) and the problem should be resolved.

On a side note, I noticed that you are using the Hay skin for the pickers. Note that this skin was obsolete and is not available in the new version of the controls. There is a blog post here explaining why this step was necessary.

Regards,
Viktor Tachev
Telerik

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

answered on 06 Mar 2014, 02:21 PM

Thanks Viktor Tachev for your kind support. I really appreciate telerik team for this valuable response.

Now, regarding my issue, I have resolved it without updating the telerik version.

I just have added a client-side javascript event onmouseout="blur()" in my primary RadTimePicker and it worked fine for me.

The updated control is as below :

<telerik:RadTimePicker ID="rtpAll" runat="server" Width="85" DateInput-DateFormat="HH:mm" TimeView-TimeFormat="HH:mm" Skin="Hay">

<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x">

</Calendar>

<TimeView CellSpacing="-1" TimeFormat="HH:mm" OnClientTimeSelected="OnClientTimeSelected">

</TimeView>

<TimePopupButton CssClass="" ImageUrl="" HoverImageUrl="" onblur="hideTimePopup('rtpAll');"></TimePopupButton>

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

<DateInput CssClass="txtbox txtBack-Color" BorderColor="#D0D1AE" BorderStyle="Solid" Width="800"

onmouseout="blur()" BorderWidth="1" ForeColor="#333333" onblur="enterDateTime();">

</DateInput>

</telerik:RadTimePicker>

Although, I would not say it the best solution ever as this is just a fix for someone who face the same issue like me, but I am posting this that might help others to get rid this kind of case.

Again thanks.