How to resize the jQuery DatePicker control

gfrizzle_23935 0
Viewed 212366

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?

jquery-ui
23 Answers

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

Keijro_605800

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_141310

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_5491400

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.

<script>
        $(function () {
            $( "#datepicker" ).datepicker();
            $("div.ui-datepicker").css("font-size", "80%")
        });
</script>

Hope this helps...

user_34016750

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.

gfrizzle_239350

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 > thead > tr > th {
  padding: 0;
}
user_65569940
Related