Reduce Size of the jQuery DatePicker

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.

jQuery UI DatePicker

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:

jQuery UI DatePicker

This entry was posted in jQuery, Syndicated. Bookmark the permalink.

Comments are closed.