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

Will you give this article a +1 ? Thanks in advance

About The Author

Suprotim Agarwal
Suprotim Agarwal, ASP.NET Architecture MVP (Microsoft Most Valuable Professional) works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He is the Editor of a Developer Magazine called DNC Magazine. He has also written two EBooks 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.

Miguel Santaella said...

Thank you!!

Unknown 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