Giter VIP home page Giter VIP logo

datatables-date_range_filter's Introduction

dt-date_range_filter

This script can be used along with Datatables jQuery plug-in to filter any date column based on a date-range

Overview:

This function can be used to filter any datatables column with date values. You can select the range by using two date-pickers to get the min and max values. You might have to change the function a bit to make it work for different date formats. By default, the function will filter the datatable's third column(adata[2])which has date in format mm/dd/yyyy

Usage:

A basic example to show the usage of this function:

$(document).ready(function(){
        $(function() {
            $( "#min" ).datepicker();
        });
		 
        $(function() {
            $( "#max" ).datepicker();
        });
        
        var oTable=$('#example').dataTable();
                
        /* Add event listeners to the two date-range filtering inputs */
				
	$('#min').change( function() { oTable.fnDraw(); } );
        $('#max').change( function() { oTable.fnDraw(); } );
	});

'#min' and '#max' represent the two date-range pickers which will create the date-range to filter the table on.

By adding "change" event listeners to the two date-range pickers we are redrawing the datatable to show the filtered results everytime the dates in the date-ranger pickes change

Further Customization for different date formats:

In the daterangefilter.js,

i) lines 28,29 and 30 are used to set the date separators for the date ranges and the column data.

ii) In lines 32, 33 and 34, we are creating timestamps for all dates. The default date-format is (mm/dd/yyyy). Depending upon the date format, you might need to change the order of parameters in the Date() function.

datatables-date_range_filter's People

Contributors

thisdotname avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.