laravel - DatePicker не отображается? - PullRequest
0 голосов
/ 28 февраля 2020

Я хочу внедрить средство выбора даты на одной из моих страниц для ввода текста. У меня есть вызов страницы panel.blade.php и app.blade.php, который является страницей макета. Поскольку Laravel поставляется с установленными bootstrap и jquery, я выполнил обычный импорт, чтобы включить необходимые файлы для его работы. Ниже приведен код.

app.blade. php:

<head>




<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>



<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

</head>

.
.
.
.
.
.
<script>
$('.date').datepicker({

  format: 'mm-dd-yyyy'

});
    </script>

panel.blade. php:

 <tr>

        <td>454542</td>
        <td><input class="date form-control" type="text"></td>
        <td>Chair</td>
        <td>Received</td>
        <td>xxxx</td>                 

      </tr>

Проблема в том, что когда я нажимаю на текстовое поле, он должен выскочить из интерфейса выбора даты, но ничего не вышло. Я провел некоторое время, пытаясь выяснить, что пошло не так, но безрезультатно. Кто-нибудь может указать, что пошло не так?

Цените это.

1 Ответ

0 голосов
/ 28 февраля 2020

Проблема в том, что вы предполагаете, что Laravel включает в себя Bootstrap и jquery, но я не вижу его в бесплатной sh установке. (Вы используете шаблон, может быть?)

Поместите эти строки в вашу голову:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

И это должно прекрасно работать;)

РЕДАКТИРОВАТЬ: Попробуйте поставить jquery импорт до импорта bootstrap datepicker:

app.blade. php

<style>
html,body,h1,h2,h3,h4,h5 {font-family: "Raleway", sans-serif}
</style>



<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script
     src="https://code.jquery.com/jquery-3.4.1.min.js"
     integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
     crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>

</head>

EDIT2:

Чтобы изменить формат, вы также можете попробовать добавить свойство в поле ввода:

<input class="date form-control" data-date-format="mm/dd/yyyy">

Надеюсь, оно работает безупречно!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...