如何在Backpack for Laravel空白自定义页面使用JavaScript方法

我基于Backpack的blank视图创建了一个CRUD模块外的自定义页面，项目中CRUD模块已使用date_range字段的日期范围选择器。想知道能否在CRUD字段外使用该组件？比如如何给自定义视图中的输入框启用日期范围选择器？同时，如何让页面中的表格调用项目CRUD里已有的Datatables组件？

自定义视图代码如下：

@extends(backpack_view('blank'))

@section('header')
    <section class="container-fluid">
        <div class="row">
            <div class="col-md-6">
                <h2>Title</h2>
            </div>
            <div class="col-md-6 text-right">
                <h3>Subtitle</h3>
            </div>
        </div>
    </section>
@endsection

@section('content')
    <section class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <p>Content</p>
                <form class="form-horizontal" action="" method="post">
                    <div class="form-group row">
                    <label class="col-md-3 col-form-label" for="date-input">Date Range</label>
                    <div class="col-md-9">
                        <input class="form-control" id="date-input" type="date" name="date-input" placeholder="date">
                    </div>
                    </div>
                </form>
            </div>
        </div>
    </section>
@endsection

一、启用日期范围选择器 #

Backpack的date_range字段依赖daterangepicker插件，由于项目已在CRUD中使用该组件，相关CSS/JS资源已存在，只需按以下步骤修改自定义视图：

1. 修改输入框结构
   将原单日期输入框替换为支持范围选择的文本输入框，如需拆分开始/结束日期可添加隐藏输入：

<div class="col-md-9">
    <input class="form-control daterangepicker" id="date-input" type="text" name="date_range" placeholder="选择日期范围">
    <!-- 可选：拆分日期到独立字段提交 -->
    <input type="hidden" name="start_date" id="start_date">
    <input type="hidden" name="end_date" id="end_date">
</div>

2. 初始化日期选择器
   在视图的after_scripts区块中添加初始化代码，匹配Backpack的默认格式与语言配置：

@section('after_scripts')
@parent
<script>
$(document).ready(function() {
    $('#date-input').daterangepicker({
        locale: {
            format: 'YYYY-MM-DD',
            applyLabel: '确定',
            cancelLabel: '取消',
            daysOfWeek: ['日','一','二','三','四','五','六'],
            monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
            firstDay: 1
        },
        startDate: moment().startOf('month'),
        endDate: moment().endOf('month'),
        // 可选：将选中日期同步到隐藏输入框
        callback: function(start, end) {
            $('#start_date').val(start.format('YYYY-MM-DD'));
            $('#end_date').val(end.format('YYYY-MM-DD'));
        }
    });
});
</script>
@endsection

注：如果页面未自动加载daterangepicker资源，可在before_styles区块手动引入：

@section('before_styles')
@parent
<link rel="stylesheet" href="{{ asset('packages/backpack/crud/css/daterangepicker.css') }}">
@endsection

二、调用Datatables组件 #

项目CRUD中已集成Datatables，直接在自定义页面中按以下步骤使用：

1. 添加表格HTML结构
   在content区块中插入表格，示例如下：

<table id="customDataTable" class="table table-striped table-hover">
    <thead>
        <tr>
            <th>ID</th>
            <th>名称</th>
            <th>创建时间</th>
        </tr>
    </thead>
    <tbody>
        <!-- 替换为实际业务数据，可从控制器传递变量渲染 -->
        @foreach($dataList as $item)
        <tr>
            <td>{{ $item->id }}</td>
            <td>{{ $item->name }}</td>
            <td>{{ $item->created_at->format('Y-m-d') }}</td>
        </tr>
        @endforeach
    </tbody>
</table>

2. 初始化Datatables
   在after_scripts区块中添加初始化代码，沿用Backpack的风格配置：

@section('after_scripts')
@parent
<script>
$(document).ready(function() {
    $('#customDataTable').DataTable({
        responsive: true,
        autoWidth: false,
        language: {
            url: "{{ asset('packages/backpack/crud/js/datatables/lang/zh-CN.json') }}" // 按需切换语言
        },
        pageLength: 10,
        order: [[0, 'desc']] // 默认按ID倒序排序
    });
});
</script>
@endsection

内容的提问来源于stack exchange，提问作者SammyBlackBaron