2016-06-21 2 views
1

В течение нескольких дней я пытаюсь получить функциональность Datepicker в своем веб-приложении (на основе Laravel 5.2). Не могу заставить его работать.Laravel 5.2 datepicker

В головной части моего файла макета добавить:

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

и на дне у меня есть

<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script> 
<script> 
    $(document).ready(function() { 
    $('.datepicker').datepicker(); 
    }); 
</script> 

В файле зрения у меня есть

<div class="input-group date" data-provide="datepicker"> 
    <input type="text" class="form-control"> 
    <div class="input-group-addon"> 
     <span class="glyphicon glyphicon-th"></span> 
    </div> 
    </div> 

I» m, видя поле даты, но когда я нажимаю на него, он просто пытается открыть dateelector, но он выглядит пустым (поэтому нет дат внутри)

Предложения приветствуются!

Примечание: снимок экрана здесь enter image description here

+0

Любые ошибки в консоли? – Frisbetarian

+0

Ошибка в консоли – wiwa1978

+0

Скорее всего, проблема с отсутствующими стилями. – Frisbetarian

ответ

2

Как было сказано выше, похоже, что вам нужно добавить bootstrap CSS в ваше приложение.

Если вы намерены использовать datepicker (или любые другие элементы начальной загрузки) в более чем 1 представлении, я бы добавил его к вашему макету, это сделает жизнь намного проще, чем добавление ее в каждый файл.

Если вы добавили файлы локально в свой проект в public/assets/css, то позвоните им ниже.

<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap.min.css')}}"/> 
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/bootstrap-responsive.min.css')}}"/> 

ИЛИ

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
0

Вам может понадобиться добавить bootstrap.css, а также. Стиль элементов в календаре берет из этой таблицы стилей.

0

Включите стили бутстрапа и файлы javascript. они должны использовать bootstrap-datepicker.

+0

Остальное мое приложение уже имеет стиль начальной загрузки, поэтому они включены точно. – wiwa1978

+0

Теперь я вручную добавил файлы css и js в 'resources> css' и 'resources> js', а затем запустил gulp. Ничего не изменил. – wiwa1978