JQuery数据表和Bootstrap 3日期选择器

Question

I'm using JQuery datatables to sort some table with data. I'm using custom items to sort, in my case I have a select element which sorts one of the columns. And this works. I also have 2 inputs that serve as datepickers . These pickers have data formatted as same as on the table, so filtering works well, but my question is:

Is possible to filter column based on the range of pickers? So for example: from 1 sep 2017 to 10 sep 2017?

I'm was looking for some custom function in datatables docs but I found nothing so it's why I'm asking StackOverflow community.

I think I need to check when second date one was selected and then get data of first datepicker and filter column based on this. But to make things easier, when the first picker is selected I will just show the second picker, so the user may know that selecting the first picker will trigger need of selecting the second one also....

$(document).ready(function() {

    var table = $('#scroll-wrc-changes-table table').DataTable({
        "paging": false,
    });

    var picker1 = $('#datetimepicker1').datetimepicker({
        format: 'DD MMM YYYY',
        defaultDate: new Date(),
    });
    var picker2 = $('#datetimepicker2').datetimepicker({
        format: 'DD MMM YYYY',
        defaultDate: new Date(),
    });

    picker1.on('dp.change',function() {
        table.columns([3] ).search( this.value ).draw();

    });

    picker2.on('dp.change',function() {
        table.columns([3] ).search( this.value ).draw();
    });

    // This is just select element
    $('#table-select').change(function() {
        table.columns([2] ).search( this.value ).draw();
    })

});

Answer 1

Maybe this link can help you. Range Filtering

The idea is to make function for custom filtering.

$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    var date1 = new Date( $('#datetimepicker1').val() );
    var date2 = new Date( $('#datetimepicker2').val() );
    var dateData = new Date( data[3] ); // use data from the date column

    if ( dateData >= date1 && dateData <= date2 )
    {
        return true;
    }
    return false;
});

Hope this help..

Answer 2

Asuming you are using ajax datatable . If not draw idea from this example 
Add a row where you can set range for filter as:
<div class="col-md-3"> <label>From:</label> <input readonly="readonly" type="text" id="mindate" class="srchdp"> <i class="fa fa-times-circle-o" id="clear-mindate"></i></div>
                            <div class="col-md-3"> <label>To:</label> <input readonly="readonly" type="text" id="maxdate" class="srchdp"> <i class="fa fa-times-circle-o" id="clear-maxdate" ></i></div>
                            <div class="col-md-2"><button class="btn btn-primary" id="filter-record">Filter</button></div>

//initialize datepicker as

            $("input:text.srchdp").datetimepicker({
            changeMonth: true,
            changeYear: true,
            yearRange: "-100:+0",
            dateFormat: 'mm/dd/yy',
            controlType: 'select',
            timeFormat: 'hh:mm:ss TT',
        })

// now keep a event on filter button click


    $(document).on("click", "#filter-record", function () {

            assetListVM.search("").draw(); 
        });

// now on ajax request 

       public ActionResult Get([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel, string mindate,string maxdate, string searchbase)
        {
            DataBaseEntities db = new DataBaseEntities();
            IQueryable<Wishlist> query = db.Wishlists;
            var totalCount = query.Count();

            #region Filtering
            // Apply filters for searching

                var value = requestModel.Search.Value.Trim();
            if (!string.IsNullOrEmpty(searchbase))
            {
                if (!string.IsNullOrEmpty(mindate) && !string.IsNullOrEmpty(maxdate))
                {
                    DateTime datevaluemin;
                    DateTime datevaluemax;
                    var mindateval = DateTime.TryParse(mindate, out datevaluemin);
                    var maxdateval = DateTime.TryParse(mindate, out datevaluemax);

                    if (mindateval && maxdateval)
                    {
                        var minvalue = Convert.ToDateTime(mindate);
                        var maxvalue = Convert.ToDateTime(maxdate);
                        if (searchbase == "CreatedDate")
                        {
                            query = query.Where(p =>
                                                p.CreatedDate >= minvalue
                                                && p.CreatedDate <= maxvalue);
                        }
                    }
                }
                else if (!string.IsNullOrEmpty(mindate))
                {
                    DateTime datevalue;
                    var mindateval = DateTime.TryParse(mindate, out datevalue);

                    if (mindateval)
                    {
                        var minvalue = Convert.ToDateTime(mindate);
                        if (searchbase == "CreatedDate")
                        {
                            query = query.Where(p =>
                                                p.CreatedDate >= minvalue
                                                );
                        }

                    }
                }
            }
            if (requestModel.Search.Value != string.Empty)
            {      
                    query = query.Where(p => p.Id.ToString().Equals(value) ||
                             p.ProductId.ToString().Equals(value) ||
                             p.MemberId.ToString().Contains(value)


                       );                
            }

            var filteredCount = query.Count();

            #endregion Filtering

            #region Sorting
            // Sorting
            var sortedColumns = requestModel.Columns.GetSortedColumns();
            var orderByString = String.Empty;

            foreach (var column in sortedColumns)
            {
                orderByString += orderByString != String.Empty ? "," : "";
                orderByString += (column.Data) + (column.SortDirection == Column.OrderDirection.Ascendant ? " asc" : " desc");
            }

            query = query.OrderBy(orderByString == string.Empty ? " asc" : orderByString);

            #endregion Sorting

            // Paging
            query = query.Skip(requestModel.Start).Take(requestModel.Length);


            var data = query.Select(asset => new
            {
                Id = asset.Id,
                ProductId = asset.ProductId,
                ProductName = asset.Product.ProductName,           
                MemberId=asset.MemberId,
                CreatedDate = asset.CreatedDate.ToString(),
            }).ToList();

            return Json(new DataTablesResponse(requestModel.Draw, data, filteredCount, totalCount), JsonRequestBehavior.AllowGet);
        }
    }
}


this code is not complete hence it doesn't work alone.