Datepicker JS ошибка tempus-dominus Laravel 5.8 - PullRequest
Новая
       35

Datepicker JS ошибка tempus-dominus Laravel 5.8

0 голосов
/ 20 сентября 2019

Пытается реализовать datepicker.Я использую tempus-dominus-bootstrap-4.Я уже установил его с помощью команды npm, он уже находится в package.json.Следуя документации, я получаю сообщение об ошибке, я не очень хорошо справляюсь с javascript.

. Я получаю сообщение об ошибке:

home: 139 Uncaught ReferenceError: $ is notопределены

Когда я помещаю <script src="/js/app.js"></script> над функцией js, я получаю следующую ошибку:

Uncaught TypeError: $ (...). 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'
    });
});

Ответы [ 3 ]

0 голосов
/ 20 сентября 2019

In <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>
0 голосов
/ 20 сентября 2019

В разделе <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" />
0 голосов
/ 20 сентября 2019

попробуйте 

<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>
...