Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
130
Can we set calendar direction when it open (Upward ) for webdatePicker control.
posted

Can we set calendar direction when it open (Upward ) for webdatePicker control.

 

 

 

 

 

 

 

 

 

 

 

 

 

<ig:webdatepicker ID="wdpPartnerEntryDate" CssClass="ControlWidth1"

 

 

 

runat="server" TabIndex="6"

 

 

 

DisplayModeFormat="MM-dd-yyyy" EditModeFormat="MM-dd-yyyy"

 

 

 

DropDownCalendarID

="WebMonthCalendarHelper">

 

 

 

<Buttons

>

 

 

 

<CustomButton ImageUrl="~/ig_res/Default/images/igdd_DropDownButtonHover.png"

/>

 

 

 

</Buttons

>

 

 

 

 

</ig:webdatepicker

>

 

 

 

<ig:webmonthcalendar ID="WebMonthCalendarHelper" runat="server"

 

 

 

CssClass="DatePickerHeaderHeader" DropDownOrientation

="Top"

>

 

 

 

</ig:webmonthcalendar

>

  • 130
    posted

    ?????????

     

    • 24497
      posted in reply to geeta

      Hi Miglage,

      That question missed my attention and I apologize for delay with response.

      The WebDatePicker does not raise special event which allows to adjust location of drop-down calendar. The calculation of calendar location is based on location of editor relative to visible bounds of browser window. If there is not enough space below editor and space above editor is larger than space below, then calendar should appear above editor. There is no option to modify that functionality.

      The best application can do is to override/hack method which is used by date-picker to calculated drop-down point. Below is example:

      <script type="text/javascript" id="igClientScript1">
       function WebDatePicker1_CalendarOpening(sender, eventArgs)
       {
        $util._datePickerTime = new Date().getTime();
        if ($util._old_getDropPoint)
         return;
        $util._old_getDropPoint = $util._getDropPoint;
        $util._getDropPoint = function (elem, drop)
        {
         var p = this._old_getDropPoint(elem, drop);
         if (this._datePickerTime + 100 > new Date().getTime())
          if (p.y > this.getPosition(elem).y)
           p.y -= elem.offsetHeight + drop.offsetHeight;
         return p;
        };
       }
      </script>
      <ig:WebDatePicker ID="WebDatePicker1" runat="server">
        <ClientSideEvents CalendarOpening="WebDatePicker1_CalendarOpening" />
      </ig:WebDatePicker>

      • 10
        posted in reply to [Infragistics] Viktor Snezhko

        I had the same problem, except that the calendar would get cut off horizontally within a jQuery UI dialog window.

        If it helps anyone, here is my code:

        function wdpAirDate_CalendarOpening(sender, args)
        {
         $util._datePickerTime = new Date().getTime();
         if ($util._old_getDropPoint)
          return;
         $util._old_getDropPoint = $util._getDropPoint;
         $util._getDropPoint = function (elem, drop)
         {
          var p = this._old_getDropPoint(elem, drop);
         if (this._datePickerTime + 100 > new Date().getTime())
           if (drop.offsetLeft + drop.offsetWidth > drop.offsetParent.getClientRects()[0].width)
           {
            p.x -= (drop.offsetLeft + drop.offsetWidth) - drop.offsetParent.getClientRects()[0].width;
            p.x -= 15;
           }
          return p;
         };
        }