通过传递参数创建多个日期选择器

我想用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列的日期选择器。但与上面的代码，我没有看到在网页上的日期选择器，并没有显示错误。请建议。

来源

2017-06-22 Babanna Duggani

在您的选择器中，我会建议尝试查找td内的输入，而不是可能无法设置数据表的id。这里是一个例子。 https://stackoverflow.com/questions/14957398/select-the-3rd-td-using-jquery –

我已经在HTML代码中设置ID为“datepicker”的TD中的输入元素。不在jQuery代码中。 –

您应该显示所有相关代码以避免混淆。 – mjw

务必确保您的控制初始化代码在document.ready之内，以便DOM准备好执行JavaScript代码（即初始化控件）。

您的代码将变为：

$(document).ready(function() { 
    function drawDatePicker(elementId, columnIndex) { 
     $(elementId).datepicker({ 
     ... 
     }); 
    } 
    drawDatePicker('#datepicker',3); 
    drawDatePicker('#datepicker1',8); 
}

或者你也可以简单地使用$(function() {});

这是一个小问题，而是一个可以再次赶你出去的时间和时间。

来源

2017-06-22 13:54:08 Sandman

通过传递参数创建多个日期选择器

回答

相关问题