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

How to change Time to hours and minutes dropdownlist?

1 Answer 130 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Stanley
Top achievements
Rank 1
Stanley asked on 19 Sep 2012, 02:08 AM
Hi Support,

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

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 19 Sep 2012, 03:47 AM
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.
Tags
Calendar
Asked by
Stanley
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Share this question
or