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
875
CSS of webdatepicker for reducing size
posted

Hi i am using webdatepicker of infragistics and i open it with button click event,but i wnt to reduce its size  also i want to open it (calander)in top direction but i was unable to do that.Kindly help and provide a code if possible.I will appreciate if code with image button is given .

  • 24497
    posted

    Hi,

    There are various public methods on client for editors. You may look at docs or at methods of datePicker/dateChooser objects in debugger. Below is examples to show calendar of dateChooser and datePicker on external events.

    <script type="text/javascript">
     function dc()
     {
      var dc = ig$('WebDateChooser1');
      if(dc)
       dc.setDropDownVisible(true);
     }
     function dp()
     {
      var dp = $find('WebDatePicker1');
      if(dp)
       dp.setCalendarOpened(true);
     }
    </script>
    <input type="button" value="show calendar in chooser" onclick="dc()" />
    <input type="button" value="show calendar in picker" onclick="dp()" />
    <igsch:WebDateChooser ID="WebDateChooser1" runat="server"></igsch:WebDateChooser>
    <ig:WebDatePicker ID="WebDatePicker1" runat="server"></ig:WebDatePicker>

    Changing drop-down location of calendar is not supported. If there is not enough space below datePicker, then calendar should appear above field (older versions of WebDatePicker in some specific layouts of applications might have issues with that, but latest version should work better).

    WebDatePicker raises CalendarOpened event, so, application may process that event and change position., however, it should disable slide animation. Similar codes application may use only on its own risk. Before swap, application also may check if caledar-element is already above field-element.

    <script type="text/javascript">
     function WebDatePicker1_CalendarOpened(sender, eventArgs)
     {
      var cal = sender.get_calendar();
      var elem = cal.get_element();
      var top = elem.style.marginTop;
      top = top ? parseInt(top, 10) : 0;
      elem.style.marginTop = (top - elem.offsetHeight - sender.get_element().offsetHeight) + 'px';
     }
    </script>
    <ig:WebDatePicker ID="WebDatePicker1" runat="server">
      <calendaranimation slideopenduration="0" />
      <clientsideevents calendaropened="WebDatePicker1_CalendarOpened" />
    </ig:WebDatePicker>