How to change Time to hours and minutes dropdownlist?

[Stanley]

Hi Support,

How to change Time to hours and minutes dropdownlist?
Please refer picture from attachment.
Thanks.

[Princy]

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.