RadControls for ASP.NET AJAX RadDatePicker, RadTimePicker, and RadDateTimePicker all display their popup calendar and time view controls immediately below the input area. You can use the client-side API to display the popup above the input area instead. The following example shows how to do this for RadDateTimePicker. The same technique can be used with RadDatePicker and RadTimePicker controls.
CopyASPX
<script type="text/javascript">
function ShowPopupAbove(sender, eventArgs) {
var picker = $find("<%= RadDateTimePicker1.ClientID %>");
var userChar = eventArgs.get_keyCharacter();
var textBox = picker.get_textBox();
if (userChar == '@') {
var popupElement = picker.get_popupContainer();
var dimensions = picker.getElementDimensions(popupElement);
var position = picker.getElementPosition(textBox);
picker.showPopup(position.x, position.y - dimensions.height);
eventArgs.set_cancel(true);
}
else if (userChar == '#') {
var popupElement = picker.get_timePopupContainer();
var dimensions = picker.getElementDimensions(popupElement);
var position = picker.getElementPosition(textBox);
picker.showTimePopup(position.x, position.y - dimensions.height);
eventArgs.set_cancel(true);
}
}
</script>
<telerik:RadDateTimePicker ID="RadDateTimePicker1" runat="server">
<DateInput>
<ClientEvents OnKeyPress="ShowPopupAbove" />
</DateInput>
<DatePopupButton CssClass="radPopupImage_Default" Visible="False" />
<TimePopupButton CssClass="radPopupImage_Default" Visible="False" />
</telerik:RadDateTimePicker>
See Also