How to impliment flatpicker date range selecter in data table

zenu786

/*
Template Name: Minia - Admin & Dashboard Template
Author: Themesbrand
Website: https://themesbrand.com/
Contact: themesbrand@gmail.com
File: Datatables Js File
*/

    
$(document).ready(function () {

   
    //var minDate,maxDate;
    
  
    // Setup - add a text input to each footer cell
    $('#datatableleads thead tr')
        .clone(true)
        .addClass('filters')
        .appendTo('#datatableleads thead');
 
    var table = $('#datatableleads').DataTable({
        responsive: true,
        orderCellsTop: true,  

       
        fixedHeader: true,
        initComplete: function () {
            var api = this.api();
 
            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                   
                    // Set the header cell to contain the input element
                  
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    var id = $(cell).attr('data-id');
                    
                    $(cell).html('<input type="text" id="'+id+'" placeholder="'+ title +'"  class="fs-14"   />');
                    
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {

                            if($(this).attr('id')=='datepicker-range'){
                                console.log("Heloooo");

                                 

                                
                               
                                 //var vals=this.value ;
                                 
                                 

                            }else{

                                
                            //console.log($(this).attr('id'));


                                    // Get the search value
                                    $(this).attr('title', $(this).val());
                               
                                    //var vals=this.value ;
                                    
                                    var regexr = '({search})'; //$(this).parents('th').find('select').val();
                                   
                                    var cursorPosition = this.selectionStart;
                                    // Search the column for that value
                                    api
                                    .column(colIdx)
                                    .search(
                                        this.value != ''
                                            ? regexr.replace('{search}', '(((' + this.value + ')))')
                                            : '',
                                        this.value != '',
                                        this.value == ''
                                    )
                                    .draw();

                            }



                            
                            
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();
 
                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                });
                
        },

    
    });

    var minDate, maxDate;
 
    // Custom filtering function which will search data in column four between two values
    $.fn.dataTable.ext.search.push(
        function( settings, data, dataIndex ) {
            var min = minDate;
            var max = maxDate;
            var date = new Date( data[4] );
    
            if (
                ( min === null && max === null ) ||
                ( min === null && date <= max ) ||
                ( min <= date   && max === null ) ||
                ( min <= date   && date <= max )
            ) {
                return true;
            }
            return false;
        }
    );

    //Flat Picker Date
    flatpickr('#datepicker-range', {

        //const fp = flatpickr(".test-calendar", {  altFormat: "F j, Y", dateFormat: "Y-m-d", showMonths: 3, disableMobile: true, inline: true, mode: "range", 
        //altInput: true,
        "allowInput":true,
        dateFormat: "dd.mm.yyyy",
        mode: "range",
        //enableTime: false,
        altInput: true, // Human Readable
        //minDate: new Date().fp_incr(-60), // 60 days from today
        //maxDate: defaultEnd,
        //locale: { firstDayOfWeek: 1},

        onChange:
         function (selectedDates, dateStr, instance) { 

            console.log("Helooo");
        }, 
        onReady: function(selectedDates, dateStr, instance){ 
             //function formatDate(date, format) {
                // locale can also be used
                //return moment(date).format(format);
            //}
           
            
         } ,
         
         onClose: function(selectedDates, dateStr, instance) {

            var minDate  =  moment(selectedDates[0]);
            var maxDate  =  moment(selectedDates[1]);
            table.draw();   
            //let date=[];
            
            //for (var m = moment(minDate); m.isBefore(maxDate+1); m.add(1,'days')) {
                //date.push(m.format("L"));
           //}
            //'YYYY-MM-DD'
           //let dates= date;
          // console.log(date);
           console.log(minDate );

           //var data = $.map( date, function( value, key ) {
           // return value.text ? '^' + '$' : null;
            //});
            //var positions = date.map(function() {
                //let i;
                //for(i=0;i<date.length;){
                    //return '^' + date[i] + '$';
                    //i++;
               // }
               
               
                //i++;
            //}).join('|');
           //let  val = date.val();
           //let val2 =val.join('|');
           //console.log(val2);
           //for( i=0;i<date.length;i++){

            //var value=date[i];
            
            //console.log(date.length);
            //}
            //var regexr = '({search})'; //$(this).parents('th').find('select').val();

                //$('#datatableleads').draw();
            //return  date;
            //var value=date;
           
           
        }



        
    });


 
   


});

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.