Martin Martin - 4 months ago 45
CSS Question

Width of jQuery UI datepicker when using numberOfMonths: [2, 6]

I currently experimenting with the DatePicker widget from jQuery UI.
Im a using jQuery UI version 1.11.4

I have downloaded the sample file of jQuery UI which contains a short demo for all widgets in a index.html.
The html code for the datepicker is this:

<!-- Datepicker -->
<h2 class="demoHeaders">Datepicker</h2>
<div id="datepicker"></div>


I would like to display 12 months in the date picker to use it as a calendar.
I tried out two configurations:


  • Configuration A: 3 rows with 4 months

  • Configuration B: 2 rows with 6 months






Configuration A is working fine:

$( "#datepicker" ).datepicker({
numberOfMonths: [3, 4],
});


enter image description here

But I' am having problems with configuration B

$( "#datepicker" ).datepicker({
numberOfMonths: [2, 6],
});


Here the width of the datepicker seems to be bigger than necessary, this causes the grey background to go too far to the right. I have put an '?' onto that area.

enter image description here

In Chrome dev tools, I can see the classes and css applied to it. It seems that the width in the style might be responsible, but this is generated by jQuery.

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content
ui-helper-clearfix ui-corner-all ui-datepicker-multi-6 ui-datepicker-multi"
style="width: 102em; display: block;">


DEMO:



<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display multiple months</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: [2,6],
showButtonPanel: true
});
});
</script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"></p>


</body>
</html>
</body>
</html>





Can somehow help me on how to display 2 rows with 6 months and not having the wrong width? Thank you.




See in in jsfiddle:

You can see here too: jsfiddle.net/tvm6jrf5/1/

Answer

After trying out different possible solutions I found one that fits best for me, so I answer my own question here.

As I described above, the main problem is that JQuery UI applies a width using an inline style.

<div class="ui-datepicker-inline ui-datepicker ui-widget ui-widget-content 
ui-helper-clearfix ui-corner-all ui-datepicker-multi-6 ui-datepicker-multi" 
style="width: 102em; display: block*;"

So there is no way to fix this using CSS, because the CSS would not be applied because of the inline style to the datepicker:


Solution 1: Removing the style dynmically at runtime

This was my first approach:

$("#calendar .ui-datepicker-inline").removeAttr("style");

I have a div with an id of "calendar" where the JQuery datepicker is placed in. So I used this JQuery command to remove the style attribute at runtime.

In addition I wrote some css to set the width myself:

#calendar .ui-datepicker-inline {
    display: block;
    width: 100%;
}

At first this seemed to work, but some events causef the original wrong width to be re-applied (e.g. selecting a date, refreshing the widget, ...). I realized that I would not want to remove the style dynamically again and again for each of those events.


Solution 2: Changing the JQuery UI code which creates the style

I finally decided to fix the code in JQuery UI which is causing this, i.e. the code which generates the style with the width.

It can be found in the _updateDatepicker function within the JQuery UI source file.

I changed the following:

Before:

inst.dpDiv.addClass("ui-datepicker-multi-" + cols).css("width", (width * cols) + "em");

After:

inst.dpDiv.addClass("ui-datepicker-multi-" + cols);

The idea to do this came from this thread in the JQuery forum where a user had the same problem.

Comments