jQuery UI datepicker实现

时间:2014-03-26 19:15:27

标签: jquery html css jquery-ui datepicker

我有这个jQuery datepicker,我已经设置了样式:

http://creeight.se/jqui/

但是我很难在我正在研究的网站上看到它。看起来很糟糕:

http://creeight.se/stackExample2/

我在这里做错了什么?

3 个答案:

答案 0 :(得分:2)

日期选择器是一个表,并且具有最小单元格宽度。因此,它迫使您的内部表溢出容器。在您的width: 100%上弹出.ui-widget-content,如果您不希望该表格与当前div的大小相同,则可以解决问题。

答案 1 :(得分:1)

在我看来,主要是因为你改变了字体大小。它继承了font-size: 0.875rem;的规则,该规则来自app.css第6083和6093行中的两条规则。为我删除此规则会导致日历大小正确。我会更有针对性地使用这些规则,因为它将适用于任何表格(我确实认为选择器分别是table thead tr th, table thead tr td, table tfoot tr th, table tfoot tr tdtable tr th, table tr td)并且因为日历使用表格继承该样式(有意或者不)。如果这就是你所追求的,那么我也会改变日历的标题,这只是表格上方的一个div,所以不要把那个字体大小的规则改为不在表格中。

答案 2 :(得分:1)

只需在样式表或css代码中添加以下样式..它肯定会删除覆盖的属性..现在日期选择器的外观看起来像以前的......

    .ui-datepicker table
    {
        border-width: 0px !important;
    }
    .ui-datepicker table th, .ui-datepicker table td
    {
        font-size: inherit !important;
        line-height: inherit !important;
    }