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