Combining date and time using a RadDatePicker and RadTimePicker; not a RadDateTimePicker

5 posts, 0 answers
  1. Rome
    Rome avatar
    7 posts
    Member since:
    May 2008

    Posted 09 Apr 2009 Link to this post

    Hello.  I’m trying to use a RadDatePicker and a RadTimePicker to pick a date and time separately and then combine the two into a variable (JavaScript).  The issue I’m having is that when I choose a date from the date popup of the RadDatePicker, it defaults to a time of 12:00am (00:00:00).  And when I choose a time from the time popup of the RadTimePicker, it defaults to the current date.  How can I combine the date and time that I choose without using a RadDateTimePicker?


    Thank in advance.

  2. Dimo
    Dimo avatar
    8406 posts

    Posted 13 Apr 2009 Link to this post

    Hi Rome,

    Combining two dates is a straightforward task if you use the standard Javascript methods:

    Here is an example:

    <%@ Page Language="C#" %> 
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    <html xmlns=""
    <head runat="server"
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <title>RadControls for ASP.NET AJAX</title> 
    <form id="form1" runat="server"
    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" /> 
    <telerik:RadTimePicker ID="RadTimePicker1" runat="server" /> 
    <br /><br /><br /> 
    <asp:Button ID="Button1" runat="server" Text="Combine" OnClientClick="return Combine();" /> 
    <asp:TextBox ID="TextBox1" runat="server" Width="300px" /> 
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"
    <script type="text/javascript"
    function Combine() 
        var dp = $find("<%= RadDatePicker1.ClientID %>").get_selectedDate(); 
        var tp = $find("<%= RadTimePicker1.ClientID %>").get_selectedDate(); 
        if (!dp || !tp) 
            return false; 
        var combinedDate = new Date(dp.getFullYear(), dp.getMonth(), dp.getDate(), tp.getHours(), tp.getMinutes(), tp.getSeconds()); 
        $get("<%= TextBox1.ClientID %>").value = combinedDate
        return false; 

    All the best,
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. Rome
    Rome avatar
    7 posts
    Member since:
    May 2008

    Posted 20 Apr 2009 Link to this post

    Thank you Dimo.  This solution is what I needed. 

  4. huejiitech
    huejiitech avatar
    8 posts
    Member since:
    Aug 2013

    Posted 23 Sep 2013 Link to this post

    How about in server side?
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Sep 2013 Link to this post

    Hi Huejii,

    Please try the following code snippet that I have tried to combine date and time in server side.

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <br />
    <telerik:RadTimePicker ID="RadTimePicker1" runat="server">
    <br />
    <telerik:RadButton ID="RadButton1" runat="server" OnClick="RadButton1_Click" Text="Combine">
    <br />
    <telerik:RadTextBox ID="RadTextBox1" runat="server" Visible="false">

    protected void RadButton1_Click(object sender, EventArgs e)
        var date = RadDatePicker1.SelectedDate.Value;
        var time = RadTimePicker1.SelectedDate.Value;
        RadTextBox1.Visible = true;
        RadTextBox1.Text = date.Day + "-" + date.Month + "-" + date.Year + " " + time.Hour + ":" + time.Minute + ":" + time.Second;

Back to Top