Hide Date Popup button of RadDateTimePicker at client side

5 posts, 0 answers
  1. Ajay Khedekar
    Ajay Khedekar avatar
    9 posts
    Member since:
    Jun 2009

    Posted 05 Jan 2010 Link to this post


    I dont know whether this is the right place to put this query, but i have read somewhere that RadDateTimePicker is part of RadClender control....so putting it here....

    I want to hide DatePopup button programmatically on client side.

    is there any way to hide/unhide DatePopup button depend upon business logic ?

    Also I tried to enable/disable RadDateTimePicker control , but giving "Object Required" issue in following scenario. I am using "2009.3.1103.35" version.

    Scenario :-

    1. RadDateTimePicker is disable using follwoing code    


                    var objradDateValidity = $find("<%= radValidity.ClientID %>");




    2. Then after some businees logic ,I make it enable as follows

                   var objradDateValidity = $find("<%= radValidity.ClientID %>");




    3. And Now if I change date value using Date popup button and again try to make it disable , it throws "Object Required" error.

    4. If I dont change date value and try to make it disable, it does it without throwing any error.

    any help will be highly appreciated.


    Ajay Khedekar
  2. Johny
    Johny avatar
    80 posts
    Member since:
    Aug 2008

    Posted 06 Jan 2010 Link to this post

    Hello Ajjay,

    To get the popup button element you can use the get_popupButton method of the picker client-side object. The following document provides more details:


    In addition I tried the following code on my side and was not able to get any errors:

    <asp:ScriptManager ID="ScriptManager1" runat="server"
        <script type="text/javascript"
            var picker;  
            function pageLoad(sender, args) 
                picker = $find("<%= RadDateTimePicker1.ClientID %>"); 
            function Enable() 
            function Disable() 
            function Hide() 
                picker.get_popupButton().style.display = "none"
            function Show() 
                picker.get_popupButton().style.display = ""
        <telerik:RadDateTimePicker runat="server" ID="RadDateTimePicker1"
        <br /> 
        <input type="button" id="button1" onclick="Enable()" value="Enable" /><br /> 
        <input type="button" id="button2" onclick="Disable()" value="Disable" /><br /> 
        <input type="button" id="button3" onclick="Hide()" value="Hide popup" /><br /> 
        <input type="button" id="button4" onclick="Show()" value="Show popup" /> 

  3. Ajay Khedekar
    Ajay Khedekar avatar
    9 posts
    Member since:
    Jun 2009

    Posted 06 Jan 2010 Link to this post

    Thanks for prompt reply, it has solved my issue...

    highly appreciated...


  4. Brad
    Brad avatar
    46 posts
    Member since:
    Dec 2008

    Posted 20 Feb 2010 Link to this post

    This is a little off this topic but after 2 hours of trying to find the exact topic I had decided to ask here.

    How do I move the date popup button CLOSER to the Date Input field? I have tried widths, alignment, properties, etc. and nothing. There just doesn't seem to be a way to get it closer. I'm working on a page for mobile devices where screen real estate is at a premium so I need to tighten up empty space and this is proving to be really difficult to do.

  5. Dimo
    Dimo avatar
    8475 posts

    Posted 23 Feb 2010 Link to this post

    Hello Joe,

    You can do two things:

    1. Remove/decrease the side margin of the popup button


    2. Decrease the size of the popup button and sacrifice the hover effect

    Here is a simple demo:

    <%@ Page Language="C#" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    <head runat="server">
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
    .MyPicker .rcTable a.rcCalPopup
        margin:0 0 0 1px;
        background-position:-3px -3px;
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <p>No customizations</p>
    <telerik:RadDatePicker ID="RadDatePicker2" runat="server" />
    <p>With customizations</p>
    <telerik:RadDatePicker ID="RadDatePicker1" runat="server" CssClass="MyPicker" />

    the Telerik team

    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 Public Issue Tracking system and vote to affect the priority of the items.
Back to Top