更改jquery datepicker的高度

我正在尝试更改我正在使用的日期选择器的高度。 我一直在使用firebug并且能够通过编辑ui-datepicker类来改变宽度,如下所示:

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

宽度工作正常,但高度只会改变日历的背面,而不是单元格,所以我最终得到这样的东西: 注意细胞的高度与背景相比

datepicker背景的高度已更改,但单元格相同。 在类.ui-datepicker table我厌倦了添加一行代码height: 80% ,但高度不会低于100%(或者至少任何更低的值都不会改变datepicker的外观)。 我一直在寻找css来试图找到高度设置的位置,但到目前为止还找不到它。 有什么建议?

我把它缩小了以下两行。 我将日期选择器的宽度从14更改为12em; 并将字体设置为.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; } 

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

你提到让细胞更大。 为此,您可以在日期选择器内定位锚标记。

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

做这样的事情将使所有单元格变大,整个日期选择器窗口将自动扩展。 请注意,增加此选择器的高度不会更改宽度。 尝试向此选择器添加“width”属性将产生不必要的填充。 你必须按照原来的方式去做。

 .ui-datepicker { width: 12em; } 

以下步骤帮助了我。

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

这是修改后的UI http://sofzh.miximages.com/jquery/JQueryDatePicker.png

我认为你必须专门改变表格单元格的高度,例如:

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

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

甚至小于给出的答案:

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

更改字体大小,一切都更改

做到这一点。 高度将自动处理

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

如果它是内联日期选择器,则有一个技巧。 只需给datepicker一些id。

。 现在根据需要更改datepicker的字体大小。 它会自动更改datepicker的大小。 css代码: #datepicker{ font-size: 20px; } #datepicker{ font-size: 20px; }

由于选择的答案已经正确,但似乎没有正确调整高度和宽度。 就我而言,下面的代码完美无缺。

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

DEMO

尝试减少.ui-datepicker td的line-height属性。 当你这样做时,你可能不得不摆弄填充和字体大小以使数字适合框,但我认为行高会做你想要的。

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

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

我使用以下代码完成了它:

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

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

改变填充!

 .ui-datepicker td span, .ui-datepicker td a { padding: 10px 5px !important; }