DateTimePicker open above the textbox instead of below

[Jordan]

I am working within a modal window that nests the content in an iFrame, so when the DateTimePicker calendar opens below the textbox it gets cut off at the iFrame bottom border. The simple quick solution would be to have the calendar open above the textbox, but I have not seen any way of doing this with the MVC DateTimePicker. Is there a way to control the vertical direction that the calendar and time popouts open?

[Dimo]

Hi Jordan,

You can use the following script to open the Calendar popup above the picker's textbox:

<%= Html.Telerik().DatePicker().Name("Picker1").ClientEvents(events => events.OnOpen("Picker1_Open")) %>

function Picker1_Open(e)
{
    e.preventDefault();
    e.stopPropagation();
    var picker = $(this).data("tDatePicker");
    var popup = $("body>.t-animation-container");
    var elementPosition = picker.$element.offset();
    var position = [];
    position.outerHeight = picker.$element.outerHeight();
    position.outerWidth = picker.$element.outerWidth();
    position.zIndex = $.telerik.getElementZIndex(picker.$element);
    position.offset = [];
    position.offset.left = elementPosition.left;
    position.offset.top = elementPosition.top - popup.outerWidth() - position.outerHeight;
    picker.dateView.open(position);
}

Regards,
Dimo
the Telerik team

[Aleks]

You have error in code, there must be popup.outerHeight() instead of popup.outerWidth():

position.offset.top = elementPosition.top - popup.outerHeight() - position.outerHeight;

[Karim]

Hi, I have the same problem but with TimePicker, i tried the code above with some modification but it didn't work could you please help me.