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

4 posts, 0 answers
  1. Dev
    Dev avatar
    28 posts
    Member since:
    Jan 2011

    Posted 28 Feb 2014 Link to this post

    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.
  2. Dev
    Dev avatar
    28 posts
    Member since:
    Jan 2011

    Posted 04 Mar 2014 in reply to Dev Link to this post

    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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 05 Mar 2014 Link to this post

    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!

  5. Dev
    Dev avatar
    28 posts
    Member since:
    Jan 2011

    Posted 06 Mar 2014 in reply to Viktor Tachev Link to this post

    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.




Back to Top