Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I remove the extra width to the right of jquery UI datepicker?

I am using jquery UI datepicker against a div so I can see the months on my screen. The issue is that it seems to add a width attribute that is much wider than it actually needs which creates this extra white space as seen below

enter image description here

here is my code:

HTML

<div id="myCalendar"></div>

Javascript:

 $("#myCalendar").datepicker({
      numberOfMonths: 6,
      showButtonPanel: false,
       beforeShowDay: function (date) {

           var dateString = $.datepicker.formatDate('yy-mm-dd', date);
           if ($.inArray(dateString, highlightDateArray) > -1)
           {
               return [true, "highlightCell", ''];
           }
               else 
           {
               return [true, '', ''];
           }
        }
    });

from looking in firebug, I see

element.style {
     display: block;
     width: 102em;
}

which is way longer than necessary (having it at 82em; would be fine)

What is the best way of eliminating this white space?

like image 422
leora Avatar asked Jul 18 '15 12:07

leora


People also ask

What is jQuery UI datepicker and how to use it?

It also supports the feature to customize the date format and language, restrict the selectable date ranges, adds buttons and other navigation options easily. Along with creating a date picker, the jQuery UI Datepicker () method also changes the appearance of the HTML element on the pages by adding new CSS classes.

How to close the previously opened date picker widget in jQuery?

In this article, we will use the jQuery UI Datepicker hide () method to close the previously opened date picker widget. This method does not accept any parameter. Approach: First, add jQuery UI scripts needed for your project.

How to reduce the width of the date picker?

Reducing the font size of the calendar will reduce the width of the date picker. You can reduce the font size by adding this css: div.ui-datepicker { font-size:10px; }

How to fix jQuery UI calendar big size issue?

The fix to the issue is very simple. You just need to add the following CSS line either to the page where the jQuery UI Calendar or Datepicker plugin us used in the following way Make sure you do CTRL + F5 in the browser to clear the cache of your browser. That’s it this will fix the calendar big size issue instantly.


1 Answers

The issue is that it seems to add a width attribute that is much wider than it actually needs which creates this extra white space..

Reason:

This is the way jQuery UI has been designed.

  1. It uses a magic number 17 to calculate the width of the container.

From the code of jquery UI v1.11.4 js at line numbers 4561 thru 4574:

var origyearshtml,
    numMonths = this._getNumberOfMonths(inst),
    cols = numMonths[1],
    width = 17,
    activeCell = inst.dpDiv.find( "." + this._dayOverClass + " a" );

if ( activeCell.length > 0 ) {
    datepicker_handleMouseover.apply( activeCell.get( 0 ) );
}

inst.dpDiv.removeClass("ui-datepicker-multi-2 ui-datepicker-multi-3 ui-datepicker-multi-4").width("");
if (cols > 1) {
    inst.dpDiv.addClass("ui-datepicker-multi-" + cols).css("width", (width * cols) + "em");
}

It checks if the number of columns (months to show) are more than 1, and calculates the width as (17 * cols) + 'em'.

  1. Rest is taken care of by the core CSS. There are styles ui-datepicker-multi-2 thru to ui-datepicker-multi-4 which have predefined width in %. This causes the inner .ui-datepicker-group to fit within the width calculated in the Javascript code and applied in the same line (see js code above). If you see the core CSS, you will find that it is styled only for only upto 4 months across. If the number of months exceed 4, then the width is not applied to .ui-datepicker-group (although the relevant class is applied via js) and hence they do not expand to the entire width of the container.

From jQuery UI v1.11.4 css at line numbers 333 thru 341:

.ui-datepicker-multi-2 .ui-datepicker-group {
    width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
    width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
    width: 25%;
}

You can see that classes for ...multi-5 and beyond are not defined.

What is the best way of eliminating this white space?

Recommended solution:

Simply add more classes as required in your custom CSS. This is the recommended way (also suggested in the response here: https://forum.jquery.com/topic/datepicket-problem-with-width-when-showing-multiple-months). And also the cleanest solution.

Just add the following lines to your custom CSS:

.ui-datepicker-multi-5 .ui-datepicker-group { width: 20%; }
.ui-datepicker-multi-6 .ui-datepicker-group { width: 16.666%; }
.ui-datepicker-multi-7 .ui-datepicker-group { width: 14.285%; }
.ui-datepicker-multi-8 .ui-datepicker-group { width: 12.5%; }
.ui-datepicker-multi-9 .ui-datepicker-group { width: 11.111%; }
.ui-datepicker-multi-10 .ui-datepicker-group { width: 10%; }
.ui-datepicker-multi-11 .ui-datepicker-group { width: 9.0909%; }
.ui-datepicker-multi-12 .ui-datepicker-group { width: 8.333%; }

This will take care of all possibilities up to 12 months across. Add more classes if required, as per your use-case.

For the sake of completeness, here is a demo:

Snippet:

$("#myCalendar").datepicker({ numberOfMonths: 5, showButtonPanel: false });
.ui-datepicker-multi-5 .ui-datepicker-group { width: 20%; }
.ui-datepicker-multi-6 .ui-datepicker-group { width: 16.666%; }
.ui-datepicker-multi-7 .ui-datepicker-group { width: 14.285%; }
.ui-datepicker-multi-8 .ui-datepicker-group { width: 12.5%; }
.ui-datepicker-multi-9 .ui-datepicker-group { width: 11.111%; }
.ui-datepicker-multi-10 .ui-datepicker-group { width: 10%; }
.ui-datepicker-multi-11 .ui-datepicker-group { width: 9.0909%; }
.ui-datepicker-multi-12 .ui-datepicker-group { width: 8.333%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="myCalendar"></div>

And a customary Fiddle: https://jsfiddle.net/abhitalks/u07kfLaa/1/


Note: Do not attempt to change or forcibly override the core jQuery-UI CSS (unless it is absolutely unavoidable). This is not a recommended best-practice. You may end up with unexpected problems, e.g. like this artefact (shown in red circle) visible in the screenshot below, when you force the components inline-block:

enter image description here

And then, you will end up adding more overrides fighting that and possibly get more problems. Try to keep it clean.

like image 68
Abhitalks Avatar answered Oct 13 '22 22:10

Abhitalks