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-size: 11px;

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

jQuery UI DatePicker

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.


ranjan said...

good one - it works..

Tulasi_rams said...

Good One Thank You

Xprt said...

Thanks a lot .... it worked

Uli Becker said...

After a lot of googling: your's is simple and works! Thank you.

Anonymous said...

Thank you!!

Anonymous said...

Thank U , It worked like Charm..

Anonymous said...

just another thanks!

Anonymous said...

Wow.. Nice one... Thanks a lot.. ;)

Anonymous said...

You do not know how long I have been looking for this solution. Why jQuery doesn't provide this type of solution on their site is beyond me! Maybe too simple, but us newbies surely appreciate!

Every app site sound have a FAQ for newbies trying to figure out how to customize something with out being a wiz. We all have to star somewhere! ;)

Thank you Suprotim Agarwal (MVP)!

Best regards,
Abdul Yaseff