首页 > 解决方案 > Laravel 5.6 + Jscript 日期选择器

问题描述

我在 .blade 视图中有一个小问题,即使警报触发器有效,我似乎也无法加载 JS 选择器。

页面预览:

@extends('layouts.app')
@section('title', '| Create New Event')
@section('content')
<?php use App\Product; ?>
<div class="container">
    <div class="row border">
        <div class="col-6">
            <h4>Create a New Event</h4>
        </div>
    </div>
    {{ Form::open(array('route' => 'events.store')) }}
    <div class="row">
        <div class="col-2 form-group">
            {{ Form::label('product_id', 'Product') }}
            {{ Form::select('product_id', Product::pluck('item', 'id'), null, ['placeholder' => 'Choose Product...',
                                                                               'class'       => 'form-control',
                                                                            ])}}
        </div>
        <div class="col-2 form-group">
            {{ Form::label('pot', 'Pot') }}
            {{ Form::text('pot', null, ['placeholder' => 'Pot',
                                                   'class'       => 'form-control',
                                                ])}}
        </div>
    </div>
    <div class="row">
        <div class="col-4 form-group">
            {{ Form::label('rundate', 'Event Date') }}
            <div class='input-group date' id='datetimepicker2'>
                <input type='text' class="form-control" />
                <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </div>
        </div>
        <div class="col-2">
            visible at picker here
        </div>
    </div>
    <div class="row">
        <div class="col-3">
            textarea
        </div>
        <div class="col-1">
            button
        </div>
    </div>
</div>
@stop
@section('javascript')
@parent
<script>
    alert('test');
    $(function () {
        $('#datetimepicker2').datetimepicker({
            locale: 'en'
        });
    });
</script>
@stop

这是我的 layouts.app 的 section('javascript') 部分,javascript 已加载并且警报有效,但 datepicker 没有,与输入文本关联的按钮不执行任何操作

@section('javascript')
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"> 
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"> 
</script>
@show

标签: javascriptlaravellaravel-blade

解决方案


如果你的 datepicker 被编译成 app.js 并且依赖于 jquery 你需要在 so put 之后加载它

 <script src="{{ asset('js/app.js') }}"></script>

在 bootstrap.min.js 之后。


推荐阅读