Show Calendar Pop-Up on Hyperlink Click

[Levi]

I was wondering if there is an example on how to use a pop up calendar without the date picker control? I basically have a label/hyperlink that is a date. I want the user to be able to click on the label and have the calendar appear underneath (and right-aligned) with the label. Then from there i want to take the date selected and put it in the label.

So in other words, I want to have the calendar drop down just like with the date picker control, but i'm not using a text box, etc. I've seen examples on choosing a different location for the pop up but not how to use the pop up without the standard text box and calendar icon, etc.

Any ideas?

Thanks,
Levi

[Princy]

Hi Levi,

Try the following code and see whether it suits your need.

CSS:

<style type="text/css">
.NoDateInput  .radInput_Default  input
{
    border:0 !important;
}
</style>

ASPX:

<telerik:raddatepicker id="RadDatePicker1" runat="server" Skin="Default" SelectedDate="2009-04-06" CssClass="NoDateInput">
    <DateInput runat="server" Width="150px" onclick="TogglePopup()" BorderColor="White"  >
    </DateInput>
    <DatePopupButton Visible="False" />
</telerik:raddatepicker>

JavaScript:

<script type="text/javascript">
function TogglePopup()
{
    $find("<%= RadDatePicker1.ClientID %>").showPopup();
}
</script>

Thanks,
Princy.

[Levi]

Thanks! You rock. Works perfect.

Levi

[Levi]

Sorry, one more question. The style does not seem to be applying:

    <title>Untitled Page</title>
    <link href="css/charts.css" rel="stylesheet" type="text/css" />
    <style type="text/css">     
    .NoDateInput .radInput_Default input     
    {     
        width:1px !important;     
        border:0 !important;     
        background: none transparent !important;     
        padding:0 !important;     
    }     
    </style>
</head>

I even tried deleting the class but it didn't seem to affect anything. I'm trying to apply a background image to the hyperlink label.

Thanks,
Levi