Я пытаюсь создать несколько средств выбора даты, используя плагин jquery datepicker. У меня есть jquery datatable, созданный вместе с фильтрами столбцов. Для столбцов даты мне нужно предоставить ввод через 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 и индекс столбца, для которого мне нужно создать datepicker. В этом случае мне нужен datepicker для 3-го и 8-го столбцов. Но с приведенным выше кодом я не вижу datepicker на веб-странице и никаких ошибок не отображается. Пожалуйста, предложите.

0
Babanna Duggani 22 Июн 2017 в 16:22

1 ответ

Лучший ответ

Всегда убедитесь, что код инициализации вашего элемента управления находится в пределах document.ready чтобы модель DOM была готова к выполнению вашего кода JavaScript (т.е. инициализации элементов управления).

Ваш код станет:

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

Или вы можете просто использовать $(function() {});

Это тривиальная проблема, но она может снова и снова уловить вас.

1
Sandman 22 Июн 2017 в 16:54