RadDatePicker - Image Only, No Textbox

[Sir]

Seems like this should be easy, but I can't figure it out.

on my web page I want an image.
when image is clicked on, client javascript will display the date picker.
I will wire up client event for OnDateClick and handle from there, hiding the date picker.

I do not want the textbox that comes with the built in datepicker.
I've tried flailing around to not have it display, but I get javascript errors from the control stating that the text box cannot be found.

can anyone out there post the markup I need for this simple task?

Thanks,
RjD

[Daniel]

Hello RjD,

Try the following approach:

<telerik:RadCodeBlock runat="server">
    <style type="text/css">
        .NoDateInput .radInput_<%= RadDatePicker1.Skin %> input
        {
            width: 1px !important;
            border: 0 !important;
            background: none transparent !important;
            padding: 0 !important;
        }
    </style>
</telerik:RadCodeBlock>

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

Regards,
Daniel
the Telerik team

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

[Sir]

Thank you, that got me on my way.
I'm not a CSS guru, so it really helps.

The textbox did dissappear, but the space it would have occupied was taken up, so I set the width to 1px and that took care of that.

My image is near the upper right corner of the screen, so the calendar tries to display itself to the right and mostly off the page, so it took additional .js

var datePicker = $find("myPickerId");
var pickerTextBox = datePicker.get_textBox();
var pickerPopupElement = datePicker.get_popupContainer();
var pickerDimensions = datePicker.getElementDimensions(pickerPopupElement);
var textboxPosition = datePicker.getElementPosition(pickerTextBox);
datePicker.showPopup(textboxPosition.x - pickerDimensions.width - 20, textboxPosition.y + 15);

wow, the things you think are easiest turn out so fubar.
So positioning solved, datepicker pops up, date is selected, datepicker closes.
However, if you open the datepicker again, you cannot select the last date you just selected.
fine. I'll clear the dates, so I do sender.clear(); and that triggers the datepicker to re-run the OnDateSelected event. so basically, choosing one date runs the event code twice.

so you have to do this for the OnDateSelected event

            var date = eventArgs.get_newDate();
            var formattedDate = eventArgs.get_newValue();
            if (date != null && "" != formattedDate) {
                //alert("Do Your Work With This Date: \"" + formattedDate + "\"");
                //Clear selected date out or it can't be selected next time it's opened
                //This triggers OnDateSelected to execute again, which is why the date nullcheck if/then is required
                sender.clear();
            }


Anyhoo, thanks for you help, and if you have any suggestions to avoid the double event execution, that would be great (telling me to get newest version of telerik is not a solution for me).

[Daniel]

Hello,

Please note that your first click selects a date, unlike the second click which performs deselect.

You can use OnDateClick client event in order to handle every click on the Calendar control.

<telerik:RadDatePicker ID="RadDatePicker1" runat="server" CssClass="NoDateInput">
    <Calendar ID="Calendar1" ClientEvents-OnLoad="pickerLoad" runat="server" ClientEvents-OnDateClick="OnDateClick" />
</telerik:RadDatePicker>

Regards,
Daniel
the Telerik team

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