Date Picker Without Text Box

[Todd]

Is there any way to display the date picker without the associated text box, and have it update another element on the page? I'm having some troubles with the styles on the generated text box and would rather just have the date picker update another element on the page.

Thanks.

[Princy]

Hi Todd,

Try setting the visibility of the DateInput to false.

ASPX:

 <telerik:RadDatePicker ID="RadDatePicker1" runat="server">
            <DateInput Visible="false">
            </DateInput>
            </telerik:RadDatePicker>

Princy.

[Todd]

Thanks for the reply.

I tried to set the Visible property to False, and it does hide the text box, but it also hides the calendar.

-Todd

[Joe]

Ah I was hoping someone would have already answered this question.  And yes i agree, setting <DateInput Visible="false">  makes the whole calendar useless.  Are we going to find a solution to this, or have we?  I guess its only been 2 days.

---

[Konstantin Petkov]

Hi Joe,

You can use style="display: none;" for this purpose.

        <telerik:RadDatePicker ID="RadDatePicker1" runat="server" Width="10px">
            <DateInput style="display: none;" ></DateInput>
        </telerik:RadDatePicker>

Regards,
Konstantin Petkov
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Joe]

Ah, I should have tried that, didnt realize i could use styles on the input.  Thank you!!!!

[Arun]

Hi

I have the same problem and after setting display as none I am able to hide the textbox. But while rendering it shows the textbox for a moment and then disappears. Due to this, while screen looks bad.

I have also set the width and height as 0 but I still can see the issue.

Please suggest.

[Dimo]

Hello Arun,

A better way is to set a CssClass to the DateInput and apply a display:none style to that class:

ASPX

<telerik:RadDatePicker ID="RadDatePicker1" runat="server">
    <DateInput CssClass="hideIt" />
</telerik:RadDatePicker>

CSS

.hideIt
{
    display: none;
}

Using this approach, the textbox is not seen initially at all.


Greetings,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Amanda]

I tried adding a css class to hide the textbox, but this causes the calendar popup to be in the upper left corner of the page, instead of under the popup button.

I'd rather use a css class than an inline style so that I don't have the initial flicker, so if you have any recommendations about how to prevent the popup div from placing itself in the left corner, that'd be great.

[Princy]

Hello Amanda,

You can refer to the following help link which explains how to open the popup calendar based on the position.
How to open RadDatePicker calendar depending on its position

Hope this helps..
Princy.

 

[Dimo]

Hi all,

Actually, a better and more simple solution is NOT to hide the textbox by setting display:none. A better approach is the following:


<telerik:RadDatePicker  CssClass="NoDateInput" Skin="SkinName"  />

CSS

.NoDateInput  .radInput_SkinName  input
{
    width:1px !important;
    border:0 !important;
    background:none transparent !important;
    padding:0 !important;
}

In this case the calendar popup will appear where it should, without additional adjustments.


Greetings,
Dimo
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[rh]

This solution doesn't work anymore. I would guess that class names have changed throughout new versions. Therefore, I would say this is not a good solution since class names are likely to change as skins are updated over time.

I put the css attributes in a style attribute and it does hide the textbox that way. However, the calendar image seems to be way too far to the right in this case. This creates a big space between where the selected date is shown and where the calendar popup image is. Is there a way to decrease that amount of space?

[Dimo]

Hello Roy,

We rename CSS classes very rarely and for special reasons, so using them is pretty safe. The empty space is probably caused by the fact that no suitable width is specified for the RadDatePicker control. Here is a demo, which should work well with RadDatePicker Q1 2009 and newer :

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls for ASP.NET AJAX</title>
<style type="text/css">

.NoDateInput .RadInput_Default input
{
    width:1px !important;
    border:0 !important;
    background:none transparent !important;
    padding:0 !important;
}

</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" CssClass="NoDateInput" Skin="Default" Width="22px" />

</form>
</body>
</html>

Sincerely yours,
Dimo
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.