DateTimePicker + Minutes in popup

2 posts, 0 answers
  1. Sumanth
    Sumanth avatar
    27 posts
    Member since:
    Sep 2010

    Posted 21 Sep 2010 Link to this post

    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
  2. Dimo
    Admin
    Dimo avatar
    8472 posts

    Posted 21 Sep 2010 Link to this post

    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
Back to Top