How to resize the jQuery DatePicker control

Jquery Ui

Jquery Ui Problem Overview

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 Solutions

Solution 1 - Jquery Ui

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

Solution 2 - Jquery Ui

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.

Solution 3 - Jquery Ui

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

Solution 4 - Jquery Ui

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; }

Solution 5 - Jquery Ui

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.

Solution 6 - Jquery Ui

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%; }

Solution 7 - Jquery Ui

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:

<style type="text/css">
.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;}
</style>

Good luck!

Solution 8 - Jquery Ui

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.

Solution 9 - Jquery Ui

$('.ui-datepicker').css('font-size', $('.ui-datepicker').width() / 20 + 'px');

Solution 10 - Jquery Ui

This worked for me and seems simple...

$(function() {
  $('#inlineDatepicker').datepicker({onSelect: showDate, defaultDate: '01/01/2010'});
});

<div style="font-size:75%";>
<div id="inlineDatepicker"></div>
</div>

Solution 11 - Jquery Ui

with out changing the css file you can also change the calendar size  by putting the the following code in to ur <head>.....</head> tag:


<head>
<meta charset="utf-8" />
<title>jQuery UI Datepicker - Icon trigger</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.6em; }
</style>

<script>



$(function() {

$( "#datepicker" ).datepicker({
//font-size:10px;
 //numberOfMonths: 3,

showButtonPanel: true,
showOn: 'button',
buttonImage: "images/calendar1.gif",
buttonImageOnly: true
});
});
</script>

</head>

Solution 12 - Jquery Ui

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})}

Solution 13 - Jquery Ui

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; /* <--default is 1.1em */
}

Solution 14 - Jquery Ui

This code will work on Calender buttons. size of numbers will increase by using "line-height".

/* Change Size */
<style>
    .ui-datepicker{
        font-size:16px;
        line-height: 1.3;
    }
</style>

Solution 15 - Jquery Ui

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;
}

Solution 16 - Jquery Ui

Another approach:

$('.your-container').datepicker({
	beforeShow: function(input, datepickerInstance) {
		datepickerInstance.dpDiv.css('font-size', '11px');
	}
});

Solution 17 - Jquery Ui

$('div.ui-datepicker').css({ fontSize: '12px' }); work if we call it after $("#DueDate").datepicker();

Fiddle

Solution 18 - Jquery Ui

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)
    }
});

Solution 19 - Jquery Ui

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...

Solution 20 - Jquery Ui

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.

Solution 21 - Jquery Ui

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 !

Solution 22 - Jquery Ui

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;
}

Solution 23 - Jquery Ui

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;
}
Categories
Recommended Jquery Ui Solutions

Previous Solution:

WPF chart controls

C#WpfCharts

Next Solution:

How do I clear the std::queue efficiently?

C++Data StructuresStlQueue

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestiongfrizzleView Question on Stackoverflow
Solution 1 - Jquery UiJimmy StenkeView Answer on Stackoverflow
Solution 2 - Jquery UiBryant BowmanView Answer on Stackoverflow
Solution 3 - Jquery UiJacob CUIView Answer on Stackoverflow
Solution 4 - Jquery UiPavel ChuchuvaView Answer on Stackoverflow
Solution 5 - Jquery UiSatyaram B VView Answer on Stackoverflow
Solution 6 - Jquery UiRobert K.View Answer on Stackoverflow
Solution 7 - Jquery UiChad KuehnView Answer on Stackoverflow
Solution 8 - Jquery UiChrisView Answer on Stackoverflow
Solution 9 - Jquery UiStefan HöltkerView Answer on Stackoverflow
Solution 10 - Jquery UijimscafeView Answer on Stackoverflow
Solution 11 - Jquery UibabbuView Answer on Stackoverflow
Solution 12 - Jquery UiPedroKTFCView Answer on Stackoverflow
Solution 13 - Jquery UiJohn BelalcazarView Answer on Stackoverflow
Solution 14 - Jquery UiIrshad KhanView Answer on Stackoverflow
Solution 15 - Jquery UiAnshuView Answer on Stackoverflow
Solution 16 - Jquery UimromagnoliView Answer on Stackoverflow
Solution 17 - Jquery UiMostafaView Answer on Stackoverflow
Solution 18 - Jquery UiGabriel MolinaView Answer on Stackoverflow
Solution 19 - Jquery Uiuser3401675View Answer on Stackoverflow
Solution 20 - Jquery UigfrizzleView Answer on Stackoverflow
Solution 21 - Jquery UiSuperdudisView Answer on Stackoverflow
Solution 22 - Jquery UiClayView Answer on Stackoverflow
Solution 23 - Jquery UimacView Answer on Stackoverflow