How do you use JavaScript methods with blank custom pages

I have extended the 'blank' backback view to create a custom page, outside of the rest of my crud sections. I am using the date_range field elsewhere in my project:

https://backpackforlaravel.com/docs/5.x/crud-fields#date_range-pro

Is it possible to use it outside of crud fields? For example, how could I open the date-range picker in the input in the below view?

@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

Similarly, how would I make a table use Datatables, which is available in the rest of my project in the CRUD sections?

I know that jQuery is available, but I don't know what to call for datepickers, Datatables etc:

@section('after_scripts')
<script>
$(document).ready(function() {

});
</script>
@endsection

Solution

Like you said, Backpack built the integrations with https://datatables.net/ , https://bootstrap-datepicker.readthedocs.io/en/latest/ etc.

You are free to manually initialize those with your custom javascript.

What you are trying to do seems "simple" in principle but it's in reality quite complex as that's now how backpack fields are designed.

There are a lot of dependencies that you don't have on the "blank" template, one of them being the fields. fields is something that's part of the crud, and the backpack views use $field etc extensively.

Of course you can "simulate" all the variables that are used by the backpack view, and use the same "script" we use to call the initXXXElement in javascript. https://github.com/Laravel-Backpack/CRUD/blob/9b67d0ce33b3e18fdc1c69fa79cbe2a385017080/src/resources/views/crud/form_content.blade.php#L31

Everything is replicable, it's just not something that can easily be achievable for someone without deep knowledge of the software.

That's one of the major PAIN points we have identified, and we have plans to address them in a next version (maybe not fully, but at least partially), the reusability of those kind of components (table, fields etc).

At the moment I think you will be better by just going to the plugins, or see the examples in our components, and apply the JS yourself when you need it.

Sorry can't be of more help.

Cheers