1

试图实施datepicker。我正在使用tempus-dominus-bootstrap-4. 我已经使用npm命令安装了它，它已经在package.json. 遵循文档但我得到一个错误，我对javascript.

我得到以下错误：

主页：139 未捕获的 ReferenceError：$ 未定义

当我放在<script src="/js/app.js"></script>js 函数上方时，这是我得到的错误：

未捕获的类型错误：$(...).datetimepicker 不是函数

Blade.php，脚本在blade文件中。

            <div class="modal-body">
                <label for="name">Employee Name</label>
                <input type="text" name="name" id="" class="form-control">
                <label for="datetimepicker4">Date Hired</label>
                <div class="input-group date" id="datetimepicker4" data-target-input="nearest">
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4"/>
                    <div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>

脚本

<script src="/js/app.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#datetimepicker4').datetimepicker({
        format: 'L'
    });
});
4

3 回答 3

0

在您的<head>部分中，只需添加以下代码。它对我有用-

<script src="{{ asset('js/app.js') }}"></script>
<script type="text/javascript" src="https://momentjs.com/downloads/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />
于 2019-09-20T12:55:14.233 回答
0

尝试这个

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="/js/app.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker4').datetimepicker({
            format: 'L'
        });
    });
</script>
于 2019-09-20T11:55:10.043 回答
0

在<head>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/css/tempusdominus-bootstrap-4.min.css" />

就在</body>标签上方

<script src="/js/app.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.0-alpha14/js/tempusdominus-bootstrap-4.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker4').datetimepicker({
            format: 'L'
        });
    });
</script>
于 2019-09-20T12:44:43.943 回答