Script

RespondenDataTables.php

<?php

namespace App\DataTables;

use App\Models\Responden;
use Yajra\DataTables\Services\DataTable;
use Yajra\DataTables\EloquentDataTable;
use Carbon\Carbon;
use App\DataTables\Scopes\FilterDate;

class RespondenDataTable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        $dataTable = new EloquentDataTable($query);

        return $dataTable->addColumn('action', 'respondens.datatables_actions')

        ->editColumn('created_at', function ($responden) {
                return $responden->created_at ? with(new Carbon($responden->created_at))->format('d M Y') : '';
        })
        ->editColumn('created_at', function ($responden) {
            return $responden->created_at ? with(new Carbon($responden->created_at))->format('d M Y') : '';
        })

        ->filterColumn('created_at', function ($query, $keyword) {
            $query->whereRaw("DATE_FORMAT(created_at,'%Y/%m/%d') like ?", ["%$keyword%"]);
        })

        ->addColumn('jam', function ($responden) {
            return $responden->created_at ? with(new Carbon($responden->created_at))->format('H:i') : '';
        })

        ->filterColumn('jam', function ($query, $keyword) {
            $query->whereRaw("DATE_FORMAT(created_at,'%H/%i') like ?", ["%$keyword%"]);
        })

        ->rawColumns(['action', 'jam']);

    }

    /**
     * Get query source of dataTable.
     *
     * @param \App\Models\Responden $model
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function query(Responden $model)
    {
        
        // Note : Cek dibagian ini juga mas sudah bener apa kagak

        if(!is_null(request()->start_date)) {
            $model->where('created_at', '>=', request()->start_date);
        }
        if(!is_null(request()->end_date)) {
            $model->where('created_at', '<=', request()->end_date);
        }
        
        // $model->with(['pekerjaan', 'pendidikan', 'jenis'])->select('*');


        return $model->newQuery()->select('*')->with(['pekerjaan', 'pendidikan', 'jenis']); 
        
        // Note : Cek dibagian ini juga mas sudah bener apa kagak


        return $this->applyScopes($query);
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    {
        $attributes = ['data' => 'function(d) {
            d.start_date = $("#start_date").val();
            d.end_date = $("#end_date").val();
         }'];

        return $this->builder()
            
            ->columns($this->getColumns())
            ->ajax($attributes)
            ->addAction(['width' => '120px', 'printable' => false])
            ->parameters([
                'dom'       => 'Bfrtip',
                'stateSave' => true,
                'order'     => [[0, 'desc']],
                'buttons'   => [
                    ['extend' => 'create', 'className' => 'btn btn-default btn-sm no-corner',],
                    ['extend' => 'export', 'className' => 'btn btn-default btn-sm no-corner',],
                    ['extend' => 'print', 'className' => 'btn btn-default btn-sm no-corner',],
                    ['extend' => 'reset', 'className' => 'btn btn-default btn-sm no-corner',],
                    ['extend' => 'reload', 'className' => 'btn btn-default btn-sm no-corner',],

                   
                    // ['extend' => 'printer', 'className' => 'btn btn-default btn-sm no-corner', 'text' => 'Print selected',
                    //     'exportOptions' => [
                    //         'modifier' => [
                    //             'selected' => true
                    //         ]
                    //     ]
                    // ],
                    // 'select' => true,
                ],
            ]);
    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected function getColumns()
    {
        return [
        
            ['data' => 'nama', 'name' => 'nama', 'title' => 'Nama'],
            ['data' => 'umur', 'name' => 'umur', 'title' => 'Umur'],
            ['data' => 'jenis.name', 'name' => 'jenis.name', 'title' => 'Jenis Kelamin'],
            ['data' => 'pendidikan.name', 'name' => 'pendidikan.name', 'title' => 'Pendidikan'],
            ['data' => 'pekerjaan.name', 'name' => 'pekerjaan.name', 'title' => 'Pekerjaan'],
            ['data' => 'created_at', 'name' => 'created_at', 'title' => 'Dibuat'],
            ['data' => 'jam', 'name' => 'jam', 'title' => 'Jam'],
        ];
    }

    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'respondensdatatable_' . time();
    }
}

ScopeFilterDate.php

<?php

namespace App\DataTables\Scopes;

use Yajra\DataTables\Contracts\DataTableScope;
use Illuminate\Http\Request;
use App\Models\Responden;

class FilterDate implements DataTableScope
{
    /**
     * Apply a query scope.
     *
     * @param \Illuminate\Database\Query\Builder|\Illuminate\Database\Eloquent\Builder $query
     * @return mixed
     */
    public function apply($query)
    {
        // if ($filter = request('filter')) {
        //     $query->where('filter', $filter);
        // }

        // $guests = Guest::query();

        // if(!is_null(request()->start_date)) {
        //     $guests->where('created_at', '>=', request()->start_date);
        // }
        // if(!is_null(request()->end_date)) {
        //     $guests->where('created_at', '<=', request()->end_date);
        // }
        // $startDate = '2020-01-25';
        // $endDate = '2020-01-26';

        // dd($request->all());
        return $query;
    }
}

scripts.blade.php

<script src="{{ mix('js/jquery.min.js') }}"></script>
<script src="{{ mix('js/bootstrap.min.js') }}"></script>
<script src="{{ mix('js/moment.min.js') }}"></script>
<script src="{{ mix('js/bootstrap-datetimepicker.min.js') }}"></script>
<script src="{{ mix('js/bootstrap-toggle.min.js') }}"></script>
<script src="{{ mix('js/adminlte.min.js') }}"></script>
<script src="{{ mix('js/icheck.min.js') }}"></script>
<script src="{{ mix('js/select2.min.js') }}"></script>
<script src="{{ mix('js/daterangepicker.js') }}"></script>

@yield('scripts')
<script type="text/javascript">

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
$('#responden_filter').select2({
    theme: 'bootstrap',
});

// Note : Sttart nya disini Cek dibagian ini juga mas sudah bener apa kagak

$('#filterdate').daterangepicker({

    timePicker: false,
    startDate: moment().startOf('date'),
    endDate: moment().startOf('date').add(32, 'hour'),
    locale: {
      format: 'YYYY/MM/DD',
      cancelLabel: 'Batal',
      fromLabel: 'Dari',
      toLabel: 'Sampai',
      weekLabel: 'W',
        daysOfWeek: ['M','S','S','R','K','J','S'],
    },
    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')]
    },
    
}, function(start, end, label) {
    return start, end, label;
    // console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
});

$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var startDate = $('#startDate').val();
    var endDate = $('#endDate').val();
    var createdAt = data[2] || 0; // Our date column in the table
    console.log(data);
    if (
      (startDate == "" || endDate == "") ||
      (moment(createdAt).isSameOrAfter(startDate) && moment(createdAt).isSameOrBefore(startDate))
    ) {
      return true;
    }
    return false;
  }
);

// Re-draw the table when the a date range filter changes
$('#dataTableBuilder').change(function() {
  table.draw();
});

// Note : Sampe sini script daterangepickernya

</script>