RadDateTimePicker ,select seperate hours and time

4 posts, 0 answers
  1. Greg
    Greg avatar
    56 posts
    Member since:
    Mar 2009

    Posted 24 Sep 2009 Link to this post

    Hi

    Is it possible for the RadDateTimePicker to display and select the hours and minutes seperately? For example a drop down with hours and a drop down with minutes? As I am currently using your controls and we need to be able to select by the minute, but if i did it using your control it would just give me too many options to select from.I thought it would be worth asking rather than having to remove your control and doing it using code.

    Thanks

  2. Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 28 Sep 2009 Link to this post

    Hi Greg,

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

    A workaround exists, but it is by no means ellegant. Here it is:


    <%@ 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"> 
     
    <script runat="server"
     
        protected void Page_Load(object sender, EventArgs e) 
        { 
            RadDateTimePicker1.TimeView.DataList.DataSource = new DateTime[1]; 
            RadDateTimePicker1.TimeView.DataList.DataBind(); 
        } 
         
    </script> 
     
    <html xmlns="http://www.w3.org/1999/xhtml" > 
    <head runat="server"
    <meta http-equiv="content-type" content="text/html;charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <style type="text/css"
     
    .RadCalendarTimeView td 
        border:0 !important; 
     
    </style> 
    </head> 
    <body> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
     
    <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server"
        <TimeView runat="server"
            <TimeTemplate> 
                HH: <asp:DropDownList ID="HoursDropDownList" runat="server"
                    <asp:ListItem Text="1" /> 
                    <asp:ListItem Text="2" /> 
                    <asp:ListItem Text="3" /> 
                </asp:DropDownList> 
                 
                &nbsp;&nbsp;&nbsp; 
                 
                mm: <asp:DropDownList ID="MinutesDropDownList" runat="server"
                    <asp:ListItem Text="1" /> 
                    <asp:ListItem Text="2" /> 
                    <asp:ListItem Text="3" /> 
                </asp:DropDownList> 
                 
                <br /><br /> 
                 
                <asp:Button ID="Button1" runat="server" OnClientClick="return ApplyTime()" Text="Apply Time" /> 
            </TimeTemplate> 
        </TimeView> 
    </telerik:RadDateTimePicker> 
     
    <script type="text/javascript"
     
    Sys.Application.add_load(clearClickHandler); 
     
    function clearClickHandler() 
        var tv = $find("<%= RadDateTimePicker1.ClientID %>").get_timeView(); 
         
        if (tv._onCellMouseOutDelegate) 
        { 
            $removeHandler(tv.DivElement, "mouseout", tv._onCellMouseOutDelegate); 
            tv._onCellMouseOutDelegate = null
        } 
         
        if (tv._onCellMouseOverDelegate) 
        { 
            $removeHandler(tv.DivElement, "mouseover", tv._onCellMouseOverDelegate); 
            tv._onCellMouseOverDelegate = null
        } 
         
        if (tv._onCellClickDelegate) 
        { 
            $removeHandler(tv.DivElement, "click", tv._onCellClickDelegate); 
            tv._onCellClickDelegate = null
        } 
     
    function ApplyTime() 
        var picker = $find("<%= RadDateTimePicker1.ClientID %>"); 
        picker.hideTimePopup(); 
         
        var pd = picker.get_selectedDate(); 
         
        if (!pd) 
        { 
            pd = new Date(); 
        } 
         
        pd.setHours(parseInt($get("<%= RadDateTimePicker1.ClientID %>_timeView_tdl_ctl01_HoursDropDownList").value)); 
        pd.setMinutes(parseInt($get("<%= RadDateTimePicker1.ClientID %>_timeView_tdl_ctl01_MinutesDropDownList").value)); 
         
        picker.set_selectedDate(pd); 
         
        return false; 
     
    </script> 
     
    </form> 
    </body> 
    </html> 


    Sincerely yours,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. bad nick
    bad nick avatar
    24 posts
    Member since:
    May 2009

    Posted 09 Oct 2009 Link to this post

    This is great!

    Can the time in TimeView  be pre-selected to dynamic values from code-behind? It's SelectedItem/Value properties seemed to be read-only and setting TimeView.StartTime also doesn't work for these.
  4. Dimo
    Admin
    Dimo avatar
    8451 posts

    Posted 09 Oct 2009 Link to this post

    Hi Ruslan,

    You can use the SelectedDate property of the date/time picker to preselect a value. The TimeView itself does not have such a property, as the TimeView cannot not exist as a separate control - it always "serves" a picker.

    All the best,
    Dimo
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top