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

TimePicker multiple focused times

7 Answers 119 Views

Calendar

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

7 Answers, 1 is accepted

answered on 07 Sep 2010, 09:58 AM

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

answered on 07 Sep 2010, 09:03 PM

lasttimeselected.png

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);

}

answered on 08 Sep 2010, 06:38 AM

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"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<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

answered on 08 Sep 2010, 09:19 AM

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

answered on 08 Sep 2010, 04:39 PM

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;

}

Accepted

answered on 08 Sep 2010, 11:57 PM

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);

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Extended Reality

Free Tools

TimePicker multiple focused times

7 Answers, 1 is accepted