I often use the jQuery ui-lightness theme for my DatePicker, which I feel is quite nice. However by default, the DatePicker layout is quite ‘explosive’ and displays with big fonts.

However there is a simple way to change that with a small amount of css. Here’s some sample CSS to reduce the font-size of the DatePicker to reduce its size and change some styling

<style type="text/css">    .ui-datepicker {        font-family:Garamond;        font-size: 11px;        margin-left:10px     }</style>

Now if you run the same code, the DatePicker shows up like this: