Getting RadDatePicker to handle Multiple Dates

5 posts, 0 answers
  1. Boone
    Boone avatar
    47 posts
    Member since:
    May 2008

    Posted 12 Jan 2010 Link to this post

    I've heard that the RadDatePicker does not support multiple dates. I need a workaround that doesn't involve having a big calendar on my screen. What are the work around for this lack of functionality??
  2. Dimo
    Dimo avatar
    8320 posts

    Posted 14 Jan 2010 Link to this post

    Hi Boone,

    I can suggest you to use a simple image/push button and a standalone RadCalendar instance, which will be initially rendered in a container with a display:none CSS style.

    When the button is clicked, the RadCalendar's container will be made visible and positioned absolutely next to the button. You can use the $telerik.getLocation( DOM element ) method to find out the position of the button and set the result as correct top and left styles to the RadCalendar's container.

    More information about the getLocation method is available at

    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. DevCraft R3 2016 release webinar banner
  4. Guruprasath
    Guruprasath avatar
    2 posts
    Member since:
    Feb 2014

    Posted 27 Feb 2014 Link to this post

    we are using new telerik version (Q3 2013). we have a problem in getElementPosition and getLocation property in raddatetimepicker pop up location.

    i have attached clientside script for you information

    please do need full

                                    QC Deadline
                                <HeaderStyle Width="155px" HorizontalAlign="Left" />
                                    <telerik:RadTextBox ID="dttQCDeadlineTime" Width="100px" CssClass="radEnabledCss_Default"
                                        runat="server" Text='<%# Eval("ExpectedCompletionTimeQC") %>' Font-Size="9px">
                                    <asp:Image ID="QCpopupDate" runat="server" ImageUrl="~/Resources/Images/icon_calendar.png"
                                        AlternateText="Click to open Calendar popup" ImageAlign="Middle" />
                                    <asp:Image ID="QCpopupTime" runat="server" ImageUrl="~/Resources/Images/icon_time.png"
                                        AlternateText="Click to open Time Picker" ImageAlign="Middle" />
                                <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" />

    .cs page
    --- ------

     Image QCpopupDate = (Image)e.Item.FindControl("QCpopupDate");
                Image QCpopupTime = (Image)e.Item.FindControl("QCpopupTime");
                QCpopupDate.Attributes.Add("onclick", " return showQCDeadlinePopup(this," + e.Item.ItemIndex.ToString() + ");");
                QCpopupTime.Attributes.Add("onclick", " return showQCDeadlineTimePopup(this," + e.Item.ItemIndex.ToString() + ");");

    function showQCDeadlinePopup(sender, rowPos) {

                    if (QC_ShoppingStatus(rowPos) == false) {
                        return false;

                    //this is a reference to the texbox which raised the event
                    //see the methods exposed through the $telerik static client library here -
                    currentTextBox = sender.tagName == "INPUT" ? sender : $telerik.getPreviousHtmlNode(sender);
                    //This line is added to find the hidden text box in the rad text box
                    currentHiddenTextBox = currentTextBox.getElementsByTagName("input")[1];
                    currentTextBox = currentTextBox.getElementsByTagName("input")[0];
                    //.tagName == "INPUT" ? sender : $telerik.getPreviousHtmlNode(sender);
                    //this gets a reference to the datepicker, which will be shown, to facilitate
                    //the selection of a date
                    var datePicker = $find("<%= RadDateTimePicker1.ClientID %>");
                    //this variable is used to store a reference to the date picker, which is currently 
                    currentDatePicker = datePicker;
                    //this method first parses the date, that the user entered or selected, and then
                    //sets it as a selected date to the picker
                    //the code lines below show the calendar, which is used to select a date. The showPopup
                    //function takes three arguments - the x and y coordinates where to show the calendar, as 
                    //well as its height, derived from the offsetHeight property of the textbox

                    var position = datePicker.getElementPosition(currentTextBox);
                    datePicker.showPopup(position.x, position.y + currentTextBox.offsetHeight);
                    return false;

    we have a one RadDateTimePicker globally and two images called QCpopupDate, QCpopupTime. when we click image using java script we show the date and time pop up

  5. Guruprasath
    Guruprasath avatar
    2 posts
    Member since:
    Feb 2014

    Posted 27 Feb 2014 in reply to Guruprasath Link to this post

    error through Object doesn't support property or method 'getElementPosition' or Object doesn't support property or method 'getLocation'
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 27 Feb 2014 in reply to Guruprasath Link to this post

    Hi Guruprasath,

    As a work around please try the following JavaScript to get the position of the TextBox of RadDateTimePicker.

    <script type="text/javascript">
        function pageLoad() {
            var TimePicker = $find("<%=RadDateTimePicker.ClientID %>");
            var textBox = TimePicker.get_textBox();
            var position = getPosition(textBox);
            alert("Text box is located at: " + position.x + ", " + position.y);
        function getPosition(element) {
            var xPosition = 0;
            var yPosition = 0;
            while (element) {
                xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
                yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
                element = element.offsetParent;
            return { x: xPosition, y: yPosition };

Back to Top
DevCraft R3 2016 release webinar banner