如何設置多個月的jquery ui datepicker的寬度

如何設置顯示多個月份的datepicker div的寬度？我試着改變css for .ui-datepicker-group和.ui-datepicker-multi，但是當我在Firebug中查看它時，寬度被覆蓋。如何設置多個月的jquery ui datepicker的寬度

來源

2010-02-12 Mir

我不認爲有可能設置寬度。寬度似乎被硬編碼爲51em。我想出的最好的解決方案就是調整字體大小，直到達到我需要的大小。

來源

2010-02-15 08:40:41 Mir

這對我有用。我有這個腳本的底部，上述封閉體標籤：

<script type="text/javascript"> 
    $("document").ready(function(){ 

     $(".ui-datepicker-inline").width("75em"); 
    }); 
</script>

來源

2011-02-03 07:38:25

div.ui-datepicker{ 
font-size:10px; 
}

這將幫助你

來源

2012-12-27 12:11:55

改變寬度無論CSS怎麼說的最好的辦法是：

找到具有datapicker（通常jquery.ui.datepicker.js）js文件
查找

VAR origyearshtml， NUMMONTHS = this._getNumberOfMonths（研究所）...

正是在這或同一行，你會發現寬度= 17;
將其更改爲您的首選寬度。

這是我使用多個月後唯一的解決方案。

來源

2013-03-14 06:58:24

打開jQuery UI的日期選擇器的JavaScript文件，並改變 'R' 變量

_updateDatepicker: func... 
... 
r=17;

到EM寬度你喜歡的號碼。

來源

2013-10-29 03:50:33

保存jquery-ui.js在你的開發包，搜索此

（inst.dpDiv.addClass（「UI的日期選擇器，多」 +的cols）的.css（「寬」，這裏設置在像素寬度或者他們，記住「」）

$("document").ready(function(){ 

    $(".ui-datepicker-inline").width("75em"); 
});

該代碼的工作，但是當日期選擇器被修改，jquery-ui更新寬度，所以它僅適用於第一次加載。

來源

2014-03-12 13:57:13

對於未來的人誰都會有同樣的問題：

也可以使用「最大寬度」屬性：

.ui-datepicker{ 
    max-width: 1024px; 
}

爲AWAIS說，你也可以修改字體大小，這是一個好主意。使用寬度的最後一種可能性是在datepicker JQuery UI配置中使用多列的月份。

例如：

$("#datepicker").datepicker({ 
    numberOfMonths: [2,6] # 2: number of month per column, 6: number of columns 
});

這將列創建6列有2個月，所以你會在12個月完全顯示在兩行設置正確的寬度。

來源

2014-08-13 17:34:13 Kulgar

這是唯一我「最大寬度」工作的事 – Creator 2018-01-08 03:48:57

我找到了解決這個問題的辦法;將「最小寬度」設置爲（內聯）容器和組。

實施例：

.ui-datepicker-inline { min-width: 1848px; } 
.ui-datepicker-group { min-width: 308px; }

直列寬度樣式將由jQuery的被覆蓋，但全球最小寬度值將否決該寬度值。

注意：您也可以使用這個技巧來計算您的響應大小的javascript/jQuery。將寬度設置爲容器和組元素將不起作用;當日期選擇器刷新時它們將被覆蓋。所以，創建一個樣式元素並注入CSS規則。 jQuery代碼片段：

var $myExampleCalendarParentContainer = jQuery('.your-selector-here'); 
var $style = $myExampleCalendarParentContainer.children('style'); 
var $calendarContainer = $myExampleCalendarParentContainer.find('.ui-datepicker-inline'); 
var $items = $calendarContainer.find('.ui-datepicker-group'); 
var monthWidth = 300; //desired pixel width per month 

$style.html(
    '.ui-datepicker-inline { min-width:' + monthWidth * $items.length + 'px; }' 
    + '.ui-datepicker-group { min-width:' + monthWidth + 'px; }' 
);

來源

2015-07-16 14:38:04

這對我有用。你當然可以設置你想要的任何寬度。

.ui-datepicker-multi {width:100% !important}

來源

2015-10-27 14:45:33

這個固定爲我

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next { 
    visibility: hidden; 
    width:100% !important; 
} 

.ui-datepicker-group {width:100% !important}`

來源

2016-12-22 22:02:40 L0uis

如何設置多個月的jquery ui datepicker的寬度

回答

相關問題