Date range filter using datatable with jquery

Introduction :
Datatable date range filter are simply explain in this tutorial, first we need to datatable plugin so first add this datatable plugin to header tag of your html page than after try given datatable code

datatable code :

$(document).ready(function () {

$('#filter').on('click', function (e) {

var startDate = $('#start').val(),
endDate = $('#end').val();
if (startDate != "" && endDate != "") {
filterByDate(4, startDate, endDate);

if (val == 0) {
$('#example').dataTable().fnDraw();
}
else {
$('#example1').dataTable().fnDraw();
}
}
});

var filterByDate = function (column, startDate, endDate) {
$.fn.dataTableExt.afnFiltering.push(
function (oSettings, aData, iDataIndex) {
var rowDate = normalizeDate(aData[column]),
start = normalizeDate(startDate),
end = normalizeDate(endDate);

if (start <= rowDate && rowDate <= end) {
return true;
} else if (rowDate >= start && end === '' && start !== '') {
return true;
} else if (rowDate <= end && start === '' && end !== '') {
return true;
} else {
return false;
}
}
);
};

var normalizeDate = function (dateString) {
var date = new Date(dateString);
var normalized = date.getFullYear() + '' + (("0" + (date.getMonth() + 1)).slice(-2)) + '' + ("0" + date.getDate()).slice(-2);
return normalized;
}

});

See Other Tutorial :

* AngularJS CRUD Operation : Select Insert Edit Update and Delete using AngularJS in ASP.Net MVC

*  AngularJS With ASP.NET MVC

*  Convert Rows to columns using 'Pivot' in SQL Server

*  Mvc Registration page With user exist using Ajax method

*  MVC 4 How to Perform Insert Update Delete Edit Select Operation

*  MVC4 Edit,update,Delete,cancel inside gridview using sql database

*  MVC 4 Gridview To Display Data Using SQL Server Database With Simple code

*  Login page in asp.net Mvc4 Web application

*  Mvc4 How to bind Dropdown List using Sql Database

* Gridview find control in asp.net

codelearne

Date range filter using datatable with jquery

Date range filter using datatable with jquery