dt.js

dt.js

function init($this) {

		// For more options check out the Datatables Docs:
		// https://datatables.net/extensions/buttons/

		var buttons = ["copy", "print"];

		// Basic options. For more options check out the Datatables Docs:
		// https://datatables.net/manual/options

		var options = {

			lengthChange: !1,
			dom: 'Bfrtip',
			buttons: buttons,
			// select: {
			// 	style: "multi"
			// },
			language: {
				paginate: {
					previous: "<i class='fas fa-angle-left'>",
					next: "<i class='fas fa-angle-right'>"
				}
			}
		};

		// Init the datatable

		let minDate, maxDate;
 

		var table = $this.on( 'init.dt', function () {
			$('.dt-buttons .btn').removeClass('btn-primary').addClass('btn-sm btn-success');
	    }).DataTable(options);

	    let searchParams = new URLSearchParams(window.location.search)
  let dateInterval = searchParams.get('from-to');

	let start = moment().subtract(29, 'days');
	  let end = moment();

	  if (dateInterval) {
	      dateInterval = dateInterval.split(' - ');
	      start = dateInterval[0];
	      end = dateInterval[1];
	  }

	$('#date_filter').daterangepicker({
      "showDropdowns": true,
      "showWeekNumbers": true,
      "alwaysShowCalendars": true,
      startDate: start,
      endDate: end,
      locale: {
          format: 'YYYY-MM-DD',
          firstDay: 1,
      },
      ranges: {
          'Today': [moment(), moment()],
          'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
          'Last 7 Days': [moment().subtract(6, 'days'), moment()],
          'Last 30 Days': [moment().subtract(29, 'days'), moment()],
          'This Month': [moment().startOf('month'), moment().endOf('month')],
          'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
          'This Year': [moment().startOf('year'), moment().endOf('year')],
          'Last Year': [moment().subtract(1, 'year').startOf('year'), moment().subtract(1, 'year').endOf('year')],
          'All time': [moment().subtract(30, 'year').startOf('month'), moment().endOf('month')],
      }
  }, function(start, end, label) {
    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
    table.draw();
  });

	    // Custom filtering function which will search data in column four between two values
		$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
			
			let startDate = $('#date_filter').data('daterangepicker').startDate;
			let endDate = $('#date_filter').data('daterangepicker').endDate;
		    // var min = $('#min').datepicker("getDate");
            // var max = $('#max').datepicker("getDate");
            let min = new Date(startDate);
    		let max =  new Date(endDate);
            var date = new Date(data[1]);

            console.log("min",min)
            console.log("max",max)
            console.log("date",date)

            if (
		        (min === null && max === null) ||
		        (min === null && date <= max) ||
		        (min <= date && max === null) ||
		        (min <= date && date <= max)
		    ) {
		        return true;
		    }
		    return false;
		});
		 
		// Create date inputs
		minDate = new DateTime('#min', {
		    format: 'YYYY/MM/D'
		});
		maxDate = new DateTime('#max', {
		    format: 'YYYY/MM/D'
		});
		// $("#min").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });
        //     $("#max").datepicker({ onSelect: function () { table.draw(); }, changeMonth: true, changeYear: true });

	    // Refilter the table
		document.querySelectorAll('#min, #max').forEach((el) => {
		    el.addEventListener('change', () => table.draw());
		});

		document.querySelectorAll('#date_filter').forEach((el) => {
		    el.addEventListener('change', () => table.draw());
		});
	}