背景说明
使用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
);
结尾
技术点很少，但很常用。希望能帮助到需要的人。