How to resize the jQuery DatePicker control

Question

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

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.

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

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; }

Add

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

in a stylesheet loaded after the ui-files. This will also resize the date items.

For me, this was the easiest solution: I added the font-size:62.5%; to the first .ui-datepicker tag in the jquery custom css file:

before:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none;} 

after:

.ui-datepicker { width: 17em; padding: .2em .2em 0; display: none; font-size:62.5%; }

I was trying these examples without success. Apparently other stylesheets on the page were setting default font sizes for different tags. If you adjust the ui-datepicker you are changing a div. If you change a div you need to make sure the contents of that div inherit that size. This is what finally worked for me:

<style type="text/css">
.ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th{font-size:inherit;}
div.ui-datepicker{font-size:16px;width:inherit;height:inherit;}
.ui-datepicker-title span{font-size:16px;}
</style>

Good luck!