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

DateTimePicker + Minutes in popup

1 Answer 303 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Sumanth
Top achievements
Rank 1
Sumanth asked on 21 Sep 2010, 10:32 AM
Hi,
As per my requirement, Interval of TimeView of DateTimePicker needs to be 5 minutes. When i set Interval as "0:05:00", time popup displaying correctly but it was not at all appealing good. I want to display time as explained below.
TimePicker should be displayed hour time like 10:00 AM,11:00 AM,12:00 PM,1:00 PM etc, on mouse over of any time period (say 10:00 AM), another popup (say context menu) should display minuters starting from 00,05,10..... to 55.
Please help me to achive this requirement. Thanks for any help.
Thanks,
Sumanth

1 Answer, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 21 Sep 2010, 11:30 AM
Hello Sumanth,

I am afraid such a behavior is not supported out-of-the-box.

You can implement it by using the following demo as a starting point. What you should do is:

1. create a second popup
2. position it next to the mouse cursor once some time in the TimeView is clicked
3. handle one more click and construct a new adte object using the hour and minutes selected by the user
4. set the new time to the datepicker control and close the TimeView

You will need the RadDateTimePicker client API:

http://www.telerik.com/help/aspnet-ajax/calendar_clientsideraddatetimepicker.html


<%@ Page Language="VB" %>
<%@ 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="form2" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server" />
 
<script type="text/javascript">
 
var timeView;
 
function pageLoad()
{
    timeView = $find("<%= RadDateTimePicker1.ClientID %>").get_timeView();
    //debugger;
    var anchors = timeView.get_element().getElementsByTagName("a");
    for (var j = 0; j < anchors.length; j++)
    {
        $addHandler(anchors[j], "click", popSecond);
    }
}
 
function popSecond(e)
{
    //cancel native time setting
    $telerik.cancelRawEvent(e);
 
    //check clicked time
    document.title = e.target.innerHTML;
 
    // implement the rest of the functionality
    // .........
 
    // set the newly constructed selected date/time manually and close the timeView
    var picker = $find(timeView.get__OwnerDatePickerID());
    picker.set_selectedDate(new Date());
    $find(timeView.get__OwnerDatePickerID()).hideTimePopup();
}
 
</script>
 
</form>
</body>
</html>


Greetings,
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
Tags
Calendar
Asked by
Sumanth
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Share this question
or