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

时间:2017-06-22 13:22:42

标签: javascript jquery forms date datatable

我正在尝试使用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>

在上面的代码片段中,我试图为我要附加datepicker和列索引的输入元素传递id,我需要为其创建datepicker。在这种情况下,我需要第3列和第8列的datepicker。但是上面的代码我没有在网页上看到datepicker,也没有显示错误。请建议。

1 个答案:

答案 0 :(得分:1)

始终确保您的控件初始化代码在document.ready内,以便DOM准备好执行您的JavaScript代码(即控件的初始化)。

您的代码将变为:

  decodedImage:=opencv.DecodeImageMem(data)   //data is byte array.

或者您只需使用image object

即可

这是一个微不足道的问题,但可以让你一次又一次地抓住你。