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

RadDatePicker - how do you hide textbox?

10 Answers 461 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
B
Top achievements
Rank 1
B asked on 04 Oct 2010, 09:44 PM
I would like to hide the textbox on the RadDatePicker so that only the popup (calendar) Icon is displayed.  I tried settings RadDatePicker.DateInput.Visible =false....which hides the textbox, but it also seems to disable the popup button because when i click it the calendar is not displayed.  Am i missing something?  Thanks in advance.

10 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 04 Oct 2010, 09:56 PM
Hello,

Please examine the following code-library project:
How to Use RadDateTimePicker Without a Textbox And Popup Buttons

Kind regards,
Daniel
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
0
B
Top achievements
Rank 1
answered on 04 Oct 2010, 10:49 PM
got it.  that helped a lot.  thanks!
0
Manav
Top achievements
Rank 1
answered on 21 Oct 2010, 04:34 PM
How do i do this in javascript?
I have a panel which has a checkbox and a raddatepicker
when i set the panel with
.visibility = "none"

.style.display = "none"    
but the datepicker still stays there.


 

0
Dimo
Telerik team
answered on 21 Oct 2010, 04:44 PM
Hello Mark,

There is no such thing as "visibility:none". The correct CSS style is visibility:hidden.

Are you saying that after applying a display:none style to the datepicker's container, the checkbox disappears, but the datepicker remains visible? Can you demonstrate this in a simple code snippet?

Regards,
Dimo
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
0
Manav
Top achievements
Rank 1
answered on 21 Oct 2010, 05:00 PM
basically i am trying to hide the datepicker based on the value of another control and i have tried using

 


$get(ControlClientID).style.display =

"";

 

$get(ControlClientID).style.display = "none";


and also used

 

$get(ControlClientID).style.visibility= "hidden";

$get(ControlClientID).style.visibility= "visible";

but the datepicker still stays on the screen

 

0
Dimo
Telerik team
answered on 21 Oct 2010, 05:20 PM
Hello Mark,

You should use

$find( PickerClientID ).set_visible( false ); // or true

PickerClientID is the ID of a <input> element, which is never seen on the screen, and the control's client object is attached to it. So manipulating this element's styles will lead to nothing.

Best wishes,
Dimo
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
0
Manav
Top achievements
Rank 1
answered on 21 Oct 2010, 10:38 PM
Hello Dimo,
  It comes back with an error saying object does not support this property or method
I have a Raddatepicker object which contains dateinput and calender items.
so by the <input> element do you mean the dateinput element.

what i have done is that i have got the clientid of the datepicker and dateinput id and tried using your said method on both the controls but to no use. both come back with the same error.

Another interesting thing. these controls are inside a panel which If i hide/unhide from the codebehind the datepicker and all my other controls within my panel get hidden.

however, when i do this using javascript i.e. setting the panel visibility to false, the raddatepicker still stays on the screen
0
Dimo
Telerik team
answered on 25 Oct 2010, 11:08 AM
Hi Mark,

Please inspect the sample below and compare with your implementation. Note that the control cannot be initially hidden (with the Visible="false" property), because it will not be rendered on the page at all and you will not be able to show it, unless you use an AJAX request.

>> "so by the <input> element do you mean the dateinput element."

No, I mean an <input> HTML element. See the following page for more information about the RadDate(Time)Picker HTML output:

http://www.telerik.com/help/aspnet-ajax/calendar_appearanceunderstandingtheskincssfile.html

>> "these controls are inside a panel which If i hide/unhide from the codebehind the datepicker and all my other controls within my panel get hidden."

Yes, this is because the controls are not rendered on the client at all.


<%@ 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" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<asp:Button ID="Button1" runat="server" Text="toggle picker visibility" OnClientClick="return togglePickerVisibility()" />
 
<br /><br />
 
<telerik:RadDatePicker ID="RadDatePicker1" runat="server" />
 
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
 
function togglePickerVisibility()
{
    var picker = $find("<%= RadDatePicker1.ClientID %>");
    picker.set_visible(!picker.get_visible());
 
    return false;
}
 
</script>
</telerik:RadCodeBlock>
 
</form>
</body>
</html>


All the best,
Dimo
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
0
CCG
Top achievements
Rank 2
answered on 23 Apr 2015, 07:09 PM

Hi,

What is the recommended way of hiding it in the lightweight rendering mode?
When using Classic, this simple class worked fine for me.

.HiddenDateInput .rcInputCell {
    display: none;
}

 Thx

0
Venelin
Telerik team
answered on 29 Apr 2015, 07:10 AM
Hi JH,

For Lightweight rendering the rendering is changed so you can't rely on the same styles. You can use for example this CSS rule:

.HiddenDateInput .riTextBox {
    display: none;
}


Regards,
Venelin
Telerik
 

See What's Next in App Development. Register for TelerikNEXT.

 
Tags
Calendar
Asked by
B
Top achievements
Rank 1
Answers by
Daniel
Telerik team
B
Top achievements
Rank 1
Manav
Top achievements
Rank 1
Dimo
Telerik team
CCG
Top achievements
Rank 2
Venelin
Telerik team
Share this question
or