TimePicker multiple focused times

8 posts, 1 answers
  1. Drew
    Drew avatar
    22 posts
    Member since:
    Mar 2009

    Posted 03 Sep 2010 Link to this post

    every time i trigger the TimePicker to pop-up, it still has the previously selected times focused/highlighted. see attached screen shot. how do i set the focused/highlighted time client-side?
  2. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 07 Sep 2010 Link to this post

    Hi Drew,

    This is an issue related to the control's popup animation - if you move the mouse while the hide animation is running, some time cells will be highlighted. This problem is fixed in the latest versions. Please upgrade RadControls or disable the animation.

    <telerik:RadDateTimePicker>
            <ShowAnimation Duration="0" />
            <HideAnimation Duration="0" />
    </telerik:RadDateTimePicker>


    All the best,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jun 2008

    Posted 07 Sep 2010 Link to this post

    the version update fixed it, not the animation disable.

    now i need to set the focused time client-side. i have a page with multiple textboxes that share a timepicker. every time the timepicker pops, it shows the previously selected time. the issue is your timepicker doesn't know which selection to show so it highlights the previous. you can see from the attached image, it highlights the time from the below text box instead of the textbox that fired the event.

    here is the client side function i'm calling onclick:

    // called to handle the onclick and onfocus client side events for the texbox
    function ShowTimePopup(timePickerId, sender, e)
    {
        _currentTimePickerTextBox = sender;
        var timePicker = $find(timePickerId);
        var timeView = timePicker.get_timeView();
        var selectedTime = timeView.getTime();
     
        _currentTimePicker = timePicker;
        //timePicker.clear();
        //timePicker.set_focusedDate(selectedTime);
        //timeView.setTime(selectedTime.getHours(), selectedTime.getMinutes(), null, null);
     
        var position = timePicker.getElementPosition(sender);
        timePicker.showTimePopup(position.x, position.y + sender.offsetHeight);
    }
     
  4. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 08 Sep 2010 Link to this post

    Hi Jeff,

    The TimeView doesn't know the correct selected time, because you are showing it manually after cancelling the default showing event. Do you really have a reason to do it this way? A workaround is possible to implement, but first, here is a simple demo that works as expected.

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>RadControls</title>
    </head>
    <body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
     
    <telerik:RadTimePicker ID="RadTimePicker1" runat="server" ShowPopupOnFocus="true" SharedTimeViewID="RadTimeView1">
        <TimePopupButton Visible="false" />
    </telerik:RadTimePicker>
     
    <telerik:RadTimePicker ID="RadTimePicker2" runat="server" ShowPopupOnFocus="true" SharedTimeViewID="RadTimeView1">
        <TimePopupButton Visible="false" />
    </telerik:RadTimePicker>
     
    <telerik:RadTimeView ID="RadTimeView1" runat="server" />
     
    </form>
    </body>
    </html>


    Regards,
    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jun 2008

    Posted 08 Sep 2010 Link to this post

    multiple RadTimePicker controls is not an option. we need to control the focus/selection client-side. you can see from the previously posted code we were trying different things (commented out) unsuccessfully. it would be nice if there was something along the lines of the RadDatePicker's method "set_selectedDate()".
  6. Dimo
    Admin
    Dimo avatar
    8474 posts

    Posted 08 Sep 2010 Link to this post

    Jeff,

    Judging by your code snippet, you are using multiple RadTimePicker controls with a shared TimeView as well. If not, what is timePickerId in the Javascript code below? Can you provide a more extensive code snippet? What is the difference between my demo and your requirements?


    function ShowTimePopup(timePickerId, sender, e)
    {
        _currentTimePickerTextBox = sender;
        var timePicker = $find(timePickerId);

        ..........

    }

    Dimo
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Jeff
    Jeff avatar
    5 posts
    Member since:
    Jun 2008

    Posted 08 Sep 2010 Link to this post

    we have multiple text boxes that share one RadTimePicker control. the difference between your demo and our requirements is that the text boxes are dynamic. the reason you are seeing the timePickerId is because we dont like to hard-code control ids in javascript. 

    the code is too complex to post here so i'll try and paint a more clear picture:

    imagine the below panel will have text box controls dynamically added to it
    <asp:panel id="controlsPanel" runat="server" />
    <rad:radtimepicker id="timePicker" runat="server" style="display:none;" >
        <clientevents ondateselected="TimeSelected" />
    </rad:radtimepicker>

    we wire up the client events of the text boxes server-side
    timePickerTextBox.Attributes.Add("onclick", String.Format("ShowTimePopup('{0}',this,event);", timePicker.ClientID));
    timePickerTextBox.Attributes.Add("onblur", String.Format("ParseTime('{0}',this,event);", timePicker.ClientID));

    client-side functions
    // called to handle the onclick and onfocus client side events for the texbox
    function ShowTimePopup(timePickerId, sender, e)
    {
        _currentTimePickerTextBox = sender;
        var timePicker = $find(timePickerId);
     
        var position = timePicker.getElementPosition(sender);
        timePicker.showTimePopup(position.x, position.y + sender.offsetHeight);
    }
    // used to set the text of the TextBox to the value of selected from the popup
    function TimeSelected(sender, args)
    {
        if (_currentTimePickerTextBox != null)
            _currentTimePickerTextBox.value = args.get_newValue();
    }
    // parse the time entered or selected by the user
    function ParseTime(timePickerId, textBox, e)
    {
        var timePicker = $find(timePickerId);
        if (timePicker != null && textBox.value != '')
        {
            var date = timePicker.get_dateInput().parseDate(textBox.value);
            var dateInput = timePicker.get_dateInput();
     
            if (date == null)
                date = timePicker.get_selectedDate();
     
            var formattedTime = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());
            textBox.value = formattedTime;
        }
    }





  8. Answer
    Jeff
    Jeff avatar
    5 posts
    Member since:
    Jun 2008

    Posted 08 Sep 2010 Link to this post

    it took a little bit of work but we figured it out. (we were close to begin with). we grab the value from the text box and use your parseDate method on it. with the valid date object in hand we then call setTime() on the RadTimeView control and finally pop it up with the proper time selected.

    function ShowTimePopup(timePickerId, sender, e)
    {
        _currentTimePickerTextBox = sender;
        var timePicker = $find(timePickerId);
        var timeView = timePicker.get_timeView();
     
        if (_currentTimePickerTextBox.value == '')
        {
            timePicker.clear();
        }
        else
        {
            var currentTime = timePicker.get_dateInput().parseDate(_currentTimePickerTextBox.value);
            timeView.setTime(currentTime.getHours(), currentTime.getMinutes(), currentTime.getSeconds(), currentTime);
        }
     
        var position = timePicker.getElementPosition(sender);
        timePicker.showTimePopup(position.x, position.y + sender.offsetHeight);
    }
Back to Top