Фильтр даты Javascript в DataTable с использованием одного текстового поля с выбором календаря

Question

Javascript Date filter to DataTable с использованием одного текстового поля с выбором календаря. Ниже приведен мой код данных и код сценария.

 <table id="datatable" class="table table-bordered table-striped dataTable" style="width: 100%">
      <thead>
      <tr>
          <th style="width: 300px;">SDMSID</th>
          <th style="width: 300px;">Asessor</th>
          <th style="width: 300px;">Sector</th>
          <th style="width: 300px;">Job Role</th>
          <th style="width: 300px;">State</th>
          <th style="width: 300px;">City</th>
          <th style="width: 300px;">Assessment Date</th>
          <th style="width: 300px;">Batch Status</th>
          <th>Edit Assessor</th>
          <th>Add Candidates</th>
          <th>Manage Batch</th>

       </tr>
       </thead>
    </table> 

Я использовал приведенный ниже скрипт для заполнения таблицы данных

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

     <script type="text/javascript">
    $(document).ready(function () {

   function loadgrid() {
            $.ajax({
                url: 'Getdropdowns.asmx/filreschedulebatchgrid',
                method: 'post',
                dataType: 'json',
                success: function (data) {
                    $("#datatable").dataTable().fnDestroy()
                    $('#datatable').dataTable({
                        responsive: true,
                        paging: false,
                        sort: true,
                        searching: true,
                        processing: true,
                        destroy: true,
                        data: data,
                        aaSorting: [],

                        columns: [

                            { 'data': 'SDMSId' },
                            { 'data': 'UserName' },
                            { 'data': 'SectorFullName' },
                            { 'data': 'JobRoleFullName' },
                            { 'data': 'State' },
                            { 'data': 'City' },
                            {
                                'data': 'AssessmentStartDate',
                                'render': function (Assessment_Date) {
                                    var date = new Date(Assessment_Date);
                                    var month = date.getMonth() + 1;
                                    return (month.length > 1 ? month : "0" + month) + "/" + date.getDate() + "/" + date.getFullYear();
                                }
                            },
                              { 'data': 'DisplayName' },

                         {
                             'data': 'BatchId',
                             'sortable': false,
                             'searchable': false,
                             'render': function (BatchId) {

                                 return '<a href="#" data-toggle="modal" data-target="#myModal1" class="editor_edit btn btn-warning btn-xs" id=' + BatchId + ' ><i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>';
                             }
                         },
                         {
                             'data': 'BatchId',
                             'sortable': false,
                             'searchable': false,
                             'render': function (BatchId) {

                                 return '<a href="#" data-toggle="modal" style="color: white;" data-target="#myModal2" class="editor_add btn btn-warning btn-xs" id=' + BatchId + ' ><i class="fa fa-user-plus" aria-hidden="true"></i></a>';

                                 //'<input id=' + BatchId + ' type="button" onserverclick="foo_OnClick" />';


                             }
                         },
                         {
                             'data': 'BatchId',
                             'sortable': false,
                             'searchable': false,
                             'render': function (BatchId) {

                                 return '<a href="#" data-toggle="modal" style="color: white;" data-target="#myModal3" class="editor_manage btn btn-warning btn-xs" id=' + BatchId + ' ><i class="fa fa-file" aria-hidden="true"></i></a>';
                             }
                         }
                        ]
                    });
                }
            });
        };
         });

Я попробовал приведенный ниже пример не работать, и мне нужен какой-то простой способ для достижения этого фильтра.

http://plnkr.co/edit/8z7cojpJoCSJXRn9prNj?p=preview

Подскажите, пожалуйста, как добиться единого фильтра данных с календарем заранее.

Answer 1

На основе предоставленного вами примера, чтобы создать фильтр на основе ввода даты, вам необходимо:

1) Включите указатель даты в ваш HTML:

<p id="date_filter">
    <span id="date-label-from" class="date-label">From: </span><input class="date_range_filter date" type="text" id="datepicker_from" />    
</p>

2) Включите в поле данных следующее поле:

"sSearch": "Filter Data"

3) При создании таблицы присвойте ее переменной, например:

var oTable = $('#datatable').dataTable({
              your code goes here...
              });

4) Назначьте функциональность datepicker вашему элементу ввода HTML:

    $("#datepicker_from").datepicker({
        showOn: "button",
       "onSelect": function(date) {
            minDateFilter = new Date(date).getTime();
            oTable.fnDraw();
        }
      }).keyup(function() {
          minDateFilter = new Date(this.value).getTime();
          oTable.fnDraw();
      });
  });

Более подробную информацию о функциях выбора даты в Jquery можно найти здесь: http://api.jqueryui.com/datepicker/