jQuery UI inline Datepicker auto-resize to parent container

Question

I am using the responsive grid system of twitters bootstrap together with jquery ui datepicker. I have an inline datepicker inside a 'row', 'spanX' structure like so:

<div class="row">      
<div class="span3 widget">      
<div id="datepicker"></div>
</div>
...
</div>

jQuery('#datepicker').datepicker({
inline: true,
    ...
})

The suggested way for resizing the Datepicker widget is by overriding font-size. However this is not very helpful if i want to keep the Datepicker size dependent on the size of the spanX parent container while the window is resizing or for different resolutions.

Is there an elegant way to keep the inlined Datepicker at 100% width,height of the parent container?

Answer 1

try something like this:

function datepResize() {

    // Get width of parent container
    var width = jQuery("#calendar").width(); //attr('clientWidth');
    if (width == null || width < 1){
        // For IE, revert to offsetWidth if necessary
        width = jQuery("#calendar").attr('offsetWidth');
    }
    width = width - 2; // Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        // Only resize if new width exceeds a minimal threshold
        // Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery("div ui-datepicker").width()) > 5)
    {
        if (width < 166){
            jQuery("div.ui-datepicker").css({'font-size': '8px'});
            jQuery(".ui-datepicker td .ui-state-default").css({'padding':'0px','font-size': '6px'});
        }
        else if (width > 228){
            jQuery("div.ui-datepicker").css({'font-size': '13px'});
            jQuery(".ui-datepicker td .ui-state-default").css({'padding':'5px','font-size': '100%'});

        }
        else{
            jQuery("div.ui-datepicker").css({'font-size': (width-43)/16+'px'});
        }
    }

}

It gives you a preset size for every response transformation bootstrap makes.

Answer 2

This is with sass

your-container{
  .ui-datepicker {
    width: 99%;
    padding: 0;
  }
  .ui-widget {
    font-size: 0.9em;
  }
  .ui-datepicker table {
    font-size: 0.7em;
  }
}

You can change values till you see font-size, padding, and width you like.