Setting value of RadDatePicker with Javascript

6 posts, 0 answers
  1. Colin
    Colin avatar
    8 posts
    Member since:
    Dec 2008

    Posted 22 Jun 2009 Link to this post


    Can anyone please tell me how to set the value of the RadDatePicker using Javascript?


  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jun 2009 Link to this post

    Hi Colin,

    Use the set_selectedDate() method of raddatepicke in order to set the value from client side.

    <telerik:RadDatePicker ID="RadDatePicker1" runat="server">  
    <input id="Button1" type="button" value="Set Date" onclick="SetDate();" /> 

    <script type="text/javascript"
    function SetDate() 
        dateVar = new Date(); 
        var datepicker = $find("<%= RadDatePicker1.ClientID %>"); 

    Checkout the following link to know more about clientside methods of raddatepicker.
    Client-Side Basics
    RadDatePicker Client Object

  3. Colin
    Colin avatar
    8 posts
    Member since:
    Dec 2008

    Posted 23 Jun 2009 Link to this post

    Hi Shinu

    That's great.

    Thanks very much for your help

  4. Joel R
    Joel R avatar
    25 posts
    Member since:
    Nov 2007

    Posted 24 Sep 2012 Link to this post

    In order for the above to work the control must be enabled.  In my scenario I used the RadDateTimePicker and wanted the control to be enabled='false' but then the javascript did not set the value. telerik version 2011.1.519.35

    telerik:RadDateTimePicker ID="RadDateTimePickerStop" Enabled="true" runat="server"




  5. Mark Meikle
    Mark Meikle avatar
    16 posts
    Member since:
    Mar 2010

    Posted 25 Nov 2015 in reply to Shinu Link to this post

    Can you explain why this works with $find, but not with document.getElementById?
  6. Marin Bratanov
    Marin Bratanov avatar
    3907 posts

    Posted 26 Nov 2015 Link to this post

    Hi Mark,

    This is the way MS AJAX works. The client-side objects of IScriptControls (such as ours) are referenced by the $find() method: because it returns the component object with all its special API.

    document.getElementById() returns a DOM object, which is not the same.

    the control property of that DOM object is what $find() returns, so you can use something like as base for comparison:

    <telerik:RadDateTimePicker runat="server" ID="RadDateTimePicker1"></telerik:RadDateTimePicker>
        function alertReference() {
            var domObj = document.getElementById("<%=RadDateTimePicker1.ClientID%>");
            var component = domObj.control;
            var dtp = $find("<%=RadDateTimePicker1.ClientID%>");
            console.log(component === dtp);


    Marin Bratanov
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top