time to hours and minuts

2 posts, 0 answers
  1. beeta one
    beeta one avatar
    63 posts
    Member since:
    Aug 2012

    Posted 05 Nov 2012 Link to this post

    hii,
    how can i change the time to hours and minuts instead of showing only the hours in raddatetime picker?
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 05 Nov 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top