How to resize the jQuery DatePicker control

Question

I m using the jQuery DatePicker control for the first time  I ve got it working on my form  but it s about twice as big as I would like  and about 1 5 times as big as the demo on the jQuery UI page  Is there some simple setting I m missing to control the size   Edit  I found a clue  but it opens up new problems  In the CSS file  it states the component will scale according to the parent element s font size  They recommend setting   body  font-size  62 5      to make 1em   10px  Doing this gives me a nicely sized datepicker  but obviously it messes up the rest of my site  I currently have font-size   9em    I tried throwing a DIV around my text box and setting its font size  but it seems to ignore that  So there must be some way to shrink the datepicker by changing the font of its parent  but how do I do that without messing up the rest of my site

User · Answer

This worked for me and seems simple       function           inlineDatepicker   datepicker  onSelect  showDate  defaultDate   01 01 2010           lt div style  font-size 75    gt   lt div id  inlineDatepicker  gt  lt  div gt   lt  div gt

User · Answer

I think I found it - I had to go into the CSS file and change the font-size for the datepicker control directly  Obvious once you know about it  but confusing at first

User · Answer

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    lt style type  text css  gt   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    lt  style gt    Good luck

User · Answer

open ui all css  at the end put   import  ui base css    import  ui theme css    div ui-datepicker   font-size  62 5        and go

User · Answer

I tried the approach of using the callback function beforeShow but found I had to also set the line height   My version looked like   beforeShow  function    j   ui-datepicker   css   font-size   11   line-height   1 2

User · Answer

with out changing the css file you can also change the calendar size  by putting the the following code in to ur  lt head gt       lt  head gt  tag     lt head gt   lt meta charset  utf-8    gt   lt title gt jQuery UI Datepicker - Icon trigger lt  title gt   lt link rel  stylesheet  href  http   code jquery com ui 1 10 2 themes smoothness jquery-ui css    gt   lt script src  http   code jquery com jquery-1 9 1 js  gt  lt  script gt   lt script src  http   code jquery com ui 1 10 2 jquery-ui js  gt  lt  script gt   lt link rel  stylesheet  href   resources demos style css    gt   lt style type  text css  gt   ui-widget   font-family  Lucida Grande  Lucida Sans  Arial  sans-serif  font-size  0 6em     lt  style gt    lt script gt       function           datepicker    datepicker     font-size 10px     numberOfMonths  3   showButtonPanel  true  showOn   button   buttonImage   images calendar1 gif   buttonImageOnly  true          lt  script gt    lt  head gt

User · Answer

I had datepicker appearing in a modal and because of the  date-display-container  on the left hand side  the calendar was partially out of view  so I added     datepicker-date-display     display  none      datepicker-calendar-container     max-height  21em     datepicker-day-button     line-height  1 2em      datepicker-table  gt  thead  gt  tr  gt  th     padding  0

User · Answer

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

User · Answer

The Jacob Tsui solution works perfect for me       event date   datepicker       showButtonPanel  true      dateFormat   mm dd yy       beforeShow  function                 ui-datepicker   css  font-size   12

User · Answer

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

User · Answer

To get this to work in Safari 5 1 with Rails 3 1  I had to add    ui-datepicker   ui-datepicker a   font-size 10px

User · Answer

We can alter in the default  jquery-ui css  file as below given code   div ui-datepicker   font-size  80        However  changing the default  jquery-ui css  file is not recommended as it might have been used somewhere else in the project  Changing values in the default file can alter datepicker font in other webpages where it has been used   I used the below code to alter  font-size   I placed it just after datepicker   is called as shown below    lt script gt            function                       datepicker    datepicker                   div ui-datepicker   css  font-size    80                 lt  script gt    Hope this helps

User · Answer

ui-datepicker   css  font-size       ui-datepicker   width     20    px

User · Answer

This code will work on Calender buttons  size of numbers will increase by using  line-height       Change Size     lt style gt       ui-datepicker          font-size 16px          line-height  1 3         lt  style gt

User · Answer

I was using an input to collect and show the calendar  and to be able to resize the calendar I have been using this code   div ui-datepicker   ui-datepicker input font-size 62 5      It works like a charm

User · Answer

Another approach       your-container   datepicker       beforeShow  function input  datepickerInstance            datepickerInstance dpDiv css  font-size    11px

User · Answer

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

User · Answer

you can change jquery-ui-1 10 4 custom css as follows   ui-widget       font-family  Lucida Grande Lucida Sans Arial sans-serif      font-size  0 6em

User · Answer

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

User · Answer

div ui-datepicker   css   fontSize   12px      work if we call it after      DueDate   datepicker     Fiddle

User · Answer

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

User · Answer

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

User · Answer

the best place to change the size of the calendar is in the file jquery-ui css     Component containers ----------------------------------    ui-widget       font-family  Verdana Arial sans-serif      font-size   7em      lt --default is 1 1em

[jquery-ui] How to resize the jQuery DatePicker control

Examples related to jquery-ui