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

time to hours and minuts

1 Answer 42 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
beeta one
Top achievements
Rank 1
beeta one asked on 05 Nov 2012, 11:28 AM
hii,
how can i change the time to hours and minuts instead of showing only the hours in raddatetime picker?

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 05 Nov 2012, 12:03 PM
Hi Hash,

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();
    }

Hope this helps.

Regards,
Princy.
Tags
Calendar
Asked by
beeta one
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Share this question
or