背景说明

使用dcat-admin 日常开发中，我们经常需要通过日期筛选数据。场景：点击btn，选择日期。完成选择后，重新加载数据。

效果图

技术实现

在数据表格工具栏添加一个按钮

 $req = Request();
            $xz_date = date('Y-m'); // 默认为当前月份
            if($req->has('xz_date')){
                $xz_date = $req->get('xz_date');
            }
            $grid->tools('<div style="position:relative;display: inline-block"><input type="text" id="datePickerInput" style="display: none;" value="'.$xz_date.'"><a class="btn btn-white btn-outline " id="xuanze_yearmonth" href="#"><i class="fa fa-calendar-check-o"></i>选择日期 '.$xz_date.'</a></div>');

在数据表格控制器开始部份，加入动态js代码，进行初始化。

Admin::script(<<<JS
        (function () {
            $('#datePickerInput').datetimepicker({
            locale:'zh-CN',
            format: 'YYYY-MM', // 日期格式
            allowInputToggle:true,
        });
            $('#datePickerInput').on('dp.change', function(e){
            var selectedDate = e.date.format('YYYY-MM');
            window.location.href = '/merchant/room-calendar?xz_date='+selectedDate;
        });
            $('#xuanze_yearmonth').click(function(){
            $('#datePickerInput').datetimepicker('show');
        });
        })();

JS
        );

结尾

技术点很少，但很常用。希望能帮助到需要的人。