dcat-admin 按钮上打开日历 选择日期

背景说明

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

效果图

dcat-admin 按钮上打开日历 选择日期

技术实现

  1. 在数据表格工具栏添加一个按钮
    $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>');
    
2. 在数据表格控制器开始部份,加入动态js代码,进行初始化。
```php
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
        );

结尾

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

基于dcat-admin 极速开发基础框架

本人持续更新各种开发案例,及常用模块
demo.saishiyun.net/admin (自动登陆,一睹为快)

dcat-admin 按钮上打开日历 选择日期

本作品采用《CC 协议》,转载必须注明作者和本文链接
Dcat-Admin (plus版)是汇聚Filament,Laravel-admin , Dcat-admin 优点于一身的基于Laravel + Bootstrap 的极速开发框架
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!