2015-09-11 88 views
0

我想我在這裏錯過了一些簡單的東西,但我似乎無法讓tr選擇器在我正在構建的日期選擇器中工作。我只想在表格行中應用一個簡單的邊框,以便日曆顯示爲一個網格,但似乎無法讓它彈起舞會。不能讓jQuery datepicker tr類工作

任何想法??這裏的日期選擇器的副本:

http://jsfiddle.net/oakass/6tbqw8px/

HTML

<input type="text" id="from" placeholder="From"> 
<input type="text" id="to" placeholder="To"> 

jQuery的

(function ($) { 
$(function() { 

    $("#from").datepicker({ 
     numberOfMonths: 1, 
     firstDay: 1, 
     onClose: function (selectedDate) { 
      $("#to").datepicker("option", "minDate", selectedDate); 
     } 
    }); 


    $("#to").datepicker({ 
     numberOfMonths: 1, 
     firstDay: 1, 
     onClose: function (selectedDate) { 
      $("#from").datepicker("option", "maxDate", selectedDate); 
     } 
    }); 

}); 

})(jQuery); 

CSS

 .ui-datepicker { 
    width: auto; 
    height: auto; 
    font: 9pt'Lato', Arial, sans-serif; 
} 

.ui-datepicker a { 
    text-decoration: none; 
} 

.ui-datepicker table { 
    width: 100%; 
} 

.ui-datepicker-header { 
    color: #333; 
    font-weight: bold; 
    line-height: 50px; 
} 

.ui-datepicker-title { 
    text-align: center; 
} 

a.ui-datepicker-next:after { 
    display: inline-block; 
    font-family: FontAwesome; 
    content:"\f054"; 
    margin-right: 20px; 
} 

a.ui-datepicker-prev:before { 
    display: inline-block; 
    font-family: FontAwesome; 
    content:"\f053"; 
    margin-left: 20px; 
} 

.ui-datepicker-prev { 
    float: left; 
    background-position: center -30px; 
    cursor: pointer; 
} 

.ui-datepicker-next { 
    float: right; 
    background-position: center 0px; 
    cursor: pointer; 
} 

.ui-icon-circle-triangle-e, .ui-icon-circle-triangle-w { 
    display: none; 
} 

.ui-datepicker th { 
    color: #333333; 
} 

.ui-datepicker td span, .ui-datepicker td a { 
    display: inline-block; 
    font-weight: bold; 
    text-align: center; 
    width: 30px; 
    height: 30px; 
    line-height: 30px; 
    color: #333333; 
} 

.ui-datepicker-calendar .ui-state-hover { 
    background: #9e2316; 
    color: #fff; 
} 

Oli

+0

我想你錯過了jQuery UI CSS [file](http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css),或者沒有複製所有需要的樣式從CSS文件的datepicker。 [演示](http://jsfiddle.net/Lf83agzf/) –

回答

2

將此添加到表border-collapse:collapse

現在當邊框在tr上添加時應該顯示。

example