更改 jquery 日期选择器的高度

Changing the height of a jquery datepicker

提问by Stanley Cup Phil

I am trying to change the height of a datepicker I am using. I have been working through firebug and was able to change the width by editing the ui-datepickerclass like so:

我正在尝试更改我正在使用的日期选择器的高度。我一直在处理 firebug 并且能够通过ui-datepicker像这样编辑类来更改宽度：

.ui-datepicker
{ 
    width: 12em;
    height: 12em;
}

The width works fine, but the height only changes the back of the calender, and not the cells so I end up with something like this:

宽度工作正常，但高度只会改变压光机的背面，而不是细胞，所以我最终得到了这样的结果：

Where the height of the datepicker background has changed, but the cells are the same. In the class .ui-datepicker tableI tired to add a line of code height: 80%, but the height will not go lower then 100% (or at least any lower will not change the appearance of the datepicker). I have been looking through the css to try to find where the height is set, but cannot find it so far. Any suggestions?

日期选择器背景的高度已更改，但单元格相同。在课堂上.ui-datepicker table我累了添加一行代码height: 80%，但高度不会低于 100%（或至少任何更低都不会改变日期选择器的外观）。我一直在查看 css 以尝试找到设置高度的位置，但到目前为止找不到。有什么建议？

回答by ChrisThompson

i got it smaller changing the following two lines. i changed width on the datepicker from 14 to 12em; and set the font to .7em.

我把它变小了，改变了以下两行。我将日期选择器的宽度从 14 更改为 12 em；并将字体设置为 .7em。

.ui-datepicker { width: 12em; padding: .2em .2em 0; display: none; }
.ui-datepicker table {width: 100%; font-size: .7em; border-collapse: collapse; margin:0 0 .4em; }

回答by Arun Duth

Following steps helped me.

以下步骤帮助了我。

1. Open CSS file 'jquery-ui.css' from \Content\themes\base\
2. Move to section 'jQuery UI Datepicker 1.8.7'
3. Change Width and Height property for following items as per requirement .ui-datepicker .ui-datepicker table
   .ui-datepicker th
   .ui-datepicker td
   .ui-datepicker td span .ui-datepicker td a

1. 从 \Content\themes\base\ 打开 CSS 文件“jquery-ui.css”
2. 移至“jQuery UI Datepicker 1.8.7”部分
3. 根据要求更改以下项目的宽度和高度属性 .ui-datepicker .ui-datepicker table
   .ui-datepicker th
   .ui-datepicker td
   .ui-datepicker td span .ui-datepicker td a

Here is the modified UI http://arunduth.net/Images/JQueryDatePicker.png

这是修改后的用户界面 http://arunduth.net/Images/JQueryDatePicker.png

回答by scottpetrovic

The date picker has a few different elements inside of it that affect the height. There is no good selector that I have found that scales the whole thing up.

日期选择器内部有一些影响高度的不同元素。我发现没有好的选择器可以放大整个事情。

You mention making the cells larger. For that, you can target the anchor tags inside of the date picker.

你提到使细胞变大。为此，您可以定位日期选择器内的锚标记。

.ui-datepicker td a
{    
  height: 1.4em;   
}

Doing something like that will make all of the cells bigger and the entire datepicker window will auto expand. Note that increasing the height this selector will not change the width. Trying to add a "width" property to this selector will create unwanted padding. You will have to do it how you originally were doing it.

这样做会使所有单元格变大，整个日期选择器窗口将自动展开。请注意，增加此选择器的高度不会改变宽度。尝试向此选择器添加“宽度”属性将创建不需要的填充。你将不得不按照你最初的方式去做。

.ui-datepicker
{ 
    width: 12em;
}

回答by Hindu

Do just this. Height would be taken care of automatically

只做这个。高度会自动处理

.ui-datepicker {
    width: 12em;
    font-size:10pt;
}

回答by Daff

I think you have to specifically change the height of the table cells, e.g. like this:

我认为您必须专门更改表格单元格的高度，例如：

.ui-datepicker td {
    height: 1em;
}

Which will also adjust the height of the sorrounding date picker.

这也将调整周围日期选择器的高度。

回答by Shakir

Even smaller than the answer given:

甚至比给出的答案还要小：

.ui-widget { font-family: Verdana,Arial,sans-serif; font-size: 0.7em; }

Change the font-size, everything changes

改变字体大小，一切都会改变

回答by Aman

If it is an inline datepicker,then there is a trick. Just give some id to datepicker .<div id="datepicker" ></div>. Now change the font-size of datepicker according to your need. It will automatically change the size of datepicker. css code: #datepicker{ font-size: 20px; }

如果它是内联日期选择器，则有一个技巧。只需给 datepicker 一些 id 。<div id="datepicker" ></div>. 现在根据需要更改 datepicker 的字体大小。它会自动更改日期选择器的大小。css代码： #datepicker{ font-size: 20px; }

回答by Ashwini Verma

Since selected answer is already correct but it appears that height and width wasn't properly adjusted. In my case, below code worked perfectly.

由于选择的答案已经正确，但似乎高度和宽度没有正确调整。就我而言，下面的代码工作得很好。

#ui-datepicker-div { font-size:11px; }

DEMO

演示

回答by oritadeu

I can't vote, then here is mine

我不能投票，那么这是我的

#dataAgenda2 .ui-widget { font-size: 0.8em !important; }

回答by Berat Emre Nebioglu

I did it using the following code :

我使用以下代码做到了：

.ui-datepicker {
  width: 200px;
  height:200px;
}

Hereis a small JSFiddle example where you can change width and height as your wish.

这是一个小的 JSFiddle 示例，您可以根据需要更改宽度和高度。