2017-04-20 44 views
0

我在這裏使用JQuery UI Datepicker:https://jqueryui.com/datepicker/。這是我實現的樣子:JQuery UI日期選取器css看起來很有問題

enter image description here

包括。在我的頭:

<!-- JQuery --> 
<script src="http://cdn.jsdelivr.net/webjars/jquery/2.1.4/jquery.min.js"></script> 

<!-- Bootstrap CSS --> 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 

<!-- Include Single Date Picker --> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css" /> 
<script src="http://cdn.rawgit.com/jquery/jquery-ui/1.10.4/ui/jquery.ui.datepicker.js"></script> 
<script id="mobile-datepicker" src="http://cdn.rawgit.com/arschmitz/jquery-mobile-datepicker-wrapper/v0.1.1/jquery.mobile.datepicker.js"></script> 

HTML。我有兩個日期選擇了在同一時間:

<!-- Include Single Date Picker --> 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 

<td><input th:field="*{dateFrom}" style="border-radius: 4px; padding: 11px 11px 11px 11px; width: 100%;" type="text" class="datepicker" /></td> 
<td><input th:field="*{dateTo}" style="border-radius: 4px; padding: 11px 11px 11px 11px; width: 100%;" type="text" class="datepicker" /></td> 

的JavaScript。在我的頁面的底部:

<!-- Initialize Date Picker --> 
<script type="text/javascript"> 
$(function() { 
    $(".datepicker").datepicker(); 
}); 
</script> 

爲什麼我的日曆看起來那麼糟糕?

+0

這是一些CSS。你能提供一個jsfiddle嗎?我會糾正它。 – Sandwell

+0

@Sandwell我在這裏開始了一個:https://jsfiddle.net/#&togetherjs=mmRTK5zow3 – santafebound

回答

1

看起來你對你的TD具有填充右某處代碼,嘗試在你的開發工具來檢查,看看那裏的 .ui-datepicker td {border: 0; padding:1px } 被覆蓋

+0

我試過尋找無處不在。甚至無法覆蓋該類的填充。必須是某種引導程序/ jquery-ui.css不兼容性... – santafebound

+0

當您右鍵單擊並按下檢查您的某個td:s時,您的檢查器的外觀如何?是.ui-datepicker td {padding:1px}劃掉? – Daniel

+0

問題是,在我的主style.css中,我在每個錨點「a」上都有一個右邊距。 jquery-ui css中不會出現的小錯誤。 – santafebound