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

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

3 Answers 231 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Dev
Top achievements
Rank 1
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>
 
<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

Sort by
0
Dev
Top achievements
Rank 1
answered on 05 Mar 2014, 05:30 AM
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

0
Viktor Tachev
Telerik team
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!

0
Dev
Top achievements
Rank 1
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.




Tags
Calendar
Asked by
Dev
Top achievements
Rank 1
Answers by
Dev
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or