How to resize the jQuery DatePicker control

Solution 1:

You don't have to change it in the jquery-ui css file (it can be confusing if you change the default files), it is enough if you add

div.ui-datepicker{
 font-size:10px;
}

in a stylesheet loaded after the ui-files

div.ui-datepicker is needed in case ui-widget is mentioned after ui-datepicker in the declaration

Solution 2:

I can't add a comment, so this is in reference to the accepted answer by Keijro. I actually added the following to my stylesheet instead:

    div.ui-datepicker {
    font-size: 62.5%;
}

and it worked as well. This might be preferable to the absolute value of 10px.

Solution 3:

Not sure whether some body has suggested following way, if yes, just ignore my comments. I tested this today and it works for me. By just resizing the font before the control gets displayed:

$('#event_date').datepicker({
    showButtonPanel: true,
    dateFormat: "mm/dd/yy",
    beforeShow: function(){    
           $(".ui-datepicker").css('font-size', 12) 
    }
});

Using the callback function beforeShow

Solution 4:

I change the following line in ui.theme.css:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 1.1em; }

to:

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: 12px; }