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

RadDatePicker - Image Only, No Textbox

3 Answers 92 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Sir
Top achievements
Rank 1
Sir asked on 17 Sep 2008, 01:08 AM
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

3 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 17 Sep 2008, 06:31 AM
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.
0
Sir
Top achievements
Rank 1
answered on 18 Sep 2008, 12:11 AM
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).
0
Daniel
Telerik team
answered on 22 Sep 2008, 03:59 PM
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.
Tags
Calendar
Asked by
Sir
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Sir
Top achievements
Rank 1
Share this question
or