Open calendar when mouse is over the control.

4 posts, 1 answers
  1. Karl Ranville
    Karl Ranville avatar
    28 posts
    Member since:
    Mar 2013

    Posted 02 Jul 2013 Link to this post

    Hi guys,

    I have a raddatepicker in my page and I want to open the calendar once the mouse is over the control textbox. So please help me with this.

    Regards
    Karl
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 03 Jul 2013 Link to this post

    Hi Karl,

    Please have a look at the sample code I tried which works fine at my end.

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

    JavaScript:
    <script type="text/javascript">
        function showCalenarpopup(e, pickerID) {
            var datePicker;
            if (pickerID == null) {
                datePicker = $find("<%= RadDatePicker1.ClientID %>");
            }
            else {
                datePicker = $find(pickerID);
            }
            datePicker.showPopup();
        }
    </script>

    C#:
    protected void Page_Load(object sender, EventArgs e)
    {
        RadDatePicker1.DateInput.Attributes.Add("onmouseover", "showCalenarpopup(event, '" + RadDatePicker1.ClientID + "');return false;");
    }

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Karl Ranville
    Karl Ranville avatar
    28 posts
    Member since:
    Mar 2013

    Posted 04 Jul 2013 Link to this post

    Hi shinu

    Your code works pretty cool. I forget to mention that calendar should go when mouse is moved apart.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 04 Jul 2013 Link to this post

    Hi Karl,

    Please try the following code along with the other code used to show the popup calendar on mouse over.

    JavaScript:
    <script type="text/javascript">
        function hideCalenarpopup(e, pickerID) {
            var datePicker;
            if (pickerID == null) {
                datePicker = $find("<%= RadDatePicker1.ClientID %>");
            }
            else {
                datePicker = $find(pickerID);
            }
            datePicker.hidePopup();
        }

    C#:
    RadDatePicker1.DateInput.Attributes.Add("onmouseout", "hideCalenarpopup(event, '" + RadDatePicker1.ClientID + "');return false;");

    Thanks,
    Shinu.
Back to Top