Custom DatePicker for DataTable Date Range Sort

amazeinstudios@gmail.com

I want to be able to utilize this date picker for bootstrap
https://www.jqueryscript.net/demo/Date-Range-Picker-For-Twitter-Bootstrap/...

The code I want to utilize to do my sorting is:

  $(document).ready(function(){
        $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            var min = $('#min').datepicker("getDate");
            var max = $('#max').datepicker("getDate");
            var startDate = new Date(data[4]);
            if (min == null && max == null) { return true; }
            if (min == null && startDate <= max) { return true;}
            if(max == null && startDate >= min) {return true;}
            if (startDate <= max && startDate >= min) { return true; }
            return false;
        }
        );

       
            $("#min").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
            var table = $('#example').DataTable();

            // Event listener to the two range filtering inputs to redraw on input
            $('#min, #max').change(function () {
                table.draw();
            });

How can I utilize this Date Range Picker with my datatables? I'm confused on how I can get my dates from rows and inserted into the date picker's configurations to pass in and have instant values. I could use the min / max as two fields but I don't have that much visual real estate and only have room for one form. So a form with a jQuery drop down would work best.

The code to instantiate the datepicker is:

$('#demo').daterangepicker({
    "autoApply": true,
    "ranges": {
      
    },
    "startDate": "12/04/2019",
    "endDate": "12/10/2019",
    "minDate": "12/10/2010",
    "maxDate": "12/10/2020"
}, function(start, end, label) {
  console.log("New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')");
});

amazeinstudios@gmail.com

The start date I can still get from the variable. How do pass in the values for min and for max. ?
Here is my live code it doesn't include the sort feature as it hasn't been created yet.
http://live.datatables.net/bapiqepa/1/edit

colin

These two threads should sort you out - here and there.

Colin

amazeinstudios@gmail.com

I see the above instances but what I think I need help with is just converting the information within the daterangepicker app to be utilized similar to the datepicker min max solution. Can you help with that? I can't make out how to implement the code to produce results. I only have one date column and it will be essential to use this particular "style" of date range selection.

..
Here's another similare question...

amazeinstudios@gmail.com

Here is my code so far. I can't seem to get it to work with the information available on the third column - "effective date".
Can you help me improve the functionality of the code...
http://live.datatables.net/pexopupu/1/edit

kthorngren

The first thing to do is to move the search plugin outside of the datepicker event. Otherwise you will push a new plugin on to the search stack each time the datepicker changes.

Next I would use moment.js to compare the dates. Here is the updated example:
http://live.datatables.net/yenehome/1/edit

I moved the global var declarations for startdate and enddate and the search plugin above Datatables initialization. The plugin will run each table draw including after initialization. The plugin validates the startdate and enddate have values then preforms the comparisons.

Your datepicker event simply gets the dates and performs draw().

HTH,
Kevin

amazeinstudios@gmail.com

There is a major flaw. I was wondering why the daterangpicker didn't pick up on the actual date as my sample date. It is because it is searching, or reading, for the wrong date range pattern. the date range I am searching for is MM-DD-YYYY the one that returns true is DD-MM-YYYY....
How can I fix that? All of the patterns are set to the necessary pattern.

kthorngren

Your example had startdate = picker.startDate.format('DD-MM-YYYY'); so I followed that pattern. Just change the formats to what you want. Or maybe I'm missing something.

Kevin

amazeinstudios@gmail.com

Hey. Thanks for the above. Is there a way I can have my date range restricted only to the entered columns dates? For example, if the dates in the column range from the second week in December, three years ago (12/5/2016), until last week Monday (12/9/2019) the most a user can search in the past is to 12/5/2016 and the most recent they can search forward is last week 12/9/2019. Essentially, restricted to only dates in my date column.