How to change Time to hours and minutes dropdownlist?

2 posts, 0 answers
  1. Stanley
    Stanley avatar
    32 posts
    Member since:
    Apr 2012

    Posted 18 Sep 2012 Link to this post

    Hi Support,

    How to change Time to hours and minutes dropdownlist?
    Please refer picture from attachment.
    Thanks.
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 Sep 2012 Link to this post

    Hi Stanley,

    One suggestion is to use the following code snippet to achieve your scenario.

    ASPX:
    <telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server">
      <TimeView ID="TimeView1" runat="server">
        <TimeTemplate>
          HH:
          <asp:DropDownList ID="HoursDropDownList" runat="server">
             <asp:ListItem Text="1" />
             <asp:ListItem Text="2" />
             <asp:ListItem Text="3" />
          </asp:DropDownList>
              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>

    JS:
    <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>

    C#:
    protected void Page_Load(object sender, EventArgs e)
        {
            RadDateTimePicker1.TimeView.DataList.DataSource = new DateTime[1];
            RadDateTimePicker1.TimeView.DataList.DataBind();
        }

    Please take a look into this for more information.

    Hope this helps.

    Regards,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top