0
我想用jQuery datepicker插件創建多個日期選擇器。我有jQuery數據表與列過濾器一起創建。對於日期列,我需要通過datepicker提供輸入並基於輸入日期,它將過濾匹配的行。下面是我的代碼:通過傳遞參數創建多個日期選擇器
function drawDatePicker(elementId, columnIndex) {
$(elementId).datepicker({
dateFormat: "dd-M-y",
showOn: "button",
showAnim: 'slideDown',
showButtonPanel: true ,
autoSize: true,
changeYear: true,
changeMonth: true,
buttonImageOnly: true,
buttonImage: "images/Calendar.gif",
onSelect: function(){
holidayTable.column(columnIndex).search($(this).val()).draw();
},
beforeShow: function(input) {
setTimeout(function() {
var buttonPane = $(input)
.datepicker("widget")
.find(".ui-datepicker-buttonpane");
$("<button>", {
text: "Clear",
click: function() {
//Code to clear date field (text box, read only field etc.)
$.datepicker._clearDate(input);
}
}).appendTo(buttonPane).addClass("ui-datepicker-clear ui-state-default ui-priority-primary ui-corner-all");
}, 1);
}
});
}
drawDatePicker('#datepicker',3);
drawDatePicker('#datepicker1',8);
下面是我的HTML表格:
<table width="100%" border=0 cellpadding=0 cellspacing="2" id="holidayTable" class="display">
<thead>
<tr>
<th class="dataTableClass" style="width:3%"><input name="selectAll" value="1" id="selectAll" type="checkbox" /></th>
<th class="dataTableClass" style="width:5%">Action</th>
<th class="dataTableClass" style="width:5%">Sr. No.</th>
<th class="dataTableClass" style="width:9%">Holiday Date</th>
<th class="dataTableClass" style="width:9%">Holiday Name</th>
<th class="dataTableClass" style="width:15%">Holiday Description</th>
<th class="dataTableClass" style="width:11%">Created/Modified By</th>
<th class="dataTableClass" style="width:9%">Created Date</th>
<th class="dataTableClass" style="width:3%">Holiday Id</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td><input type="text" class="filter" id="datepicker" style="width:75%;"/></td>
<td>Holiday Name</td>
<td>Holiday Description</td>
<td>Created/Modified By</td>
<td><input type="text" class="filter" id="datepicker1" style="width:75%;"/></td>
<td></td>
</tr>
</thead>
</table>
在上面的代碼中,我試圖通過對輸入元素的ID到我附上日期選擇器和列索引我需要創建日期選擇器。在這種情況下,我需要第3和第8列的日期選擇器。但與上面的代碼,我沒有看到在網頁上的日期選擇器,並沒有顯示錯誤。請建議。
在您的選擇器中,我會建議嘗試查找td內的輸入,而不是可能無法設置數據表的id。這裏是一個例子。 https://stackoverflow.com/questions/14957398/select-the-3rd-td-using-jquery –
我已經在HTML代碼中設置ID爲「datepicker」的TD中的輸入元素。不在jQuery代碼中。 –
您應該顯示所有相關代碼以避免混淆。 – mjw