Bootstrap datepicker выпадающее меню не падает

Я попытался удалить и добавить вещи, но выпадающее меню все равно не исчезнет. Я не уверен, в чем проблема. Я добавил меньше файлов, включая раскрывающийся список, но все же ничего не изменил. Текстовое поле работает. Вот как выглядит кодBootstrap datepicker выпадающее меню не падает

<html> 
    <head><link rel="stylesheet" type="text/css" media="screen" 
       href="css/datepicker3.css"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet/less" href="less/dropdowns.less"> 
    <link rel="stylesheet/less" href="less/sprites.less"> 
    </head> 
    <body> 
<div class="input-group date" data-date-format="dd-mm-yyyy"> 
      <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> 
    </div> 
    <script type="text/javascript"> 


     $('.input-group.date').datepicker({ 
       changeMonth: true; 
       changeYear: true; 
     }); 
     </script> 
    <script type="text/javascript" 
      src="js/jquery-1.11.2.min.js"> 
    </script> 

    </script> 
    <script type="text/javascript" 
      src="js/bootstrap.js"> 
    </script> 
    <script type="text/javascript" 
      src="js/bootstrap.min.js"> 
    </script> 
    <script type="text/javascript" 
       src="js/bootstrap-datepicker.js"> 
    </script> 
    <script type="text/javascript" 
      src="js/bootstrap-datepicker.en-GB.js"> 
       </script> 
    </body> 
</html>

источник

2015-02-20 Love

У вас есть два бутстрапа JS, если у вас уже есть 'bootstrap.min.js', нет необходимости включать' bootstrap.js'. Потому что, в основном, они одни и те же, просто «минимизированы». Попробуйте добавить '$ (document) .ready (..);' в свой скрипт. –

Пользовательский метод javascript выполняется до загрузки jquery и bootstrap.js. Ваш собственный метод будет работать только тогда, когда их класс библиотеки загрузится до того, как ваш метод будет выполнен. Таким образом, Ваш код должен выглядеть следующим образом:

<html> 
     <head><link rel="stylesheet" type="text/css" media="screen" 
        href="css/datepicker3.css"> 
     <link rel="stylesheet" href="css/bootstrap.min.css"> 
     <link rel="stylesheet/less" href="less/dropdowns.less"> 
     <link rel="stylesheet/less" href="less/sprites.less"> 
     </head> 
     <body> 
    <div class="input-group date" data-date-format="dd-mm-yyyy"> 
       <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> 
     </div> 

     <script type="text/javascript" 
       src="js/jquery-1.11.2.min.js"> 
     </script> 

     </script> 
     <script type="text/javascript" 
       src="js/bootstrap.min.js"> 
     </script> 
     <script type="text/javascript" 
        src="js/bootstrap-datepicker.js"> 
     </script> 
     <script type="text/javascript" 
       src="js/bootstrap-datepicker.en-GB.js"> 
        </script> 
    <script type="text/javascript"> 

    $('document').ready(function(){ 
     $('.input-group.date').datepicker({ 
changeMonth: true, 
    changeYear: true, 
}); 
    }); 

      </script> 
     </body> 
    </html>

$('.input-group.date').datepicker({changeMonth: true, 
 
    changeYear: true});

<!DOCTYPE html> 
 
    <html> 
 
      <head> 
 
    <script src="//code.jquery.com/jquery.min.js"></script> 
 
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 
 
       <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet" type="text/css" /> 
 
       <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker.css" rel="stylesheet" type="text/css" /> 
 

 
      </head> 
 
      <body> 
 
     <div class="input-group date" data-date-format="dd-mm-yyyy"> 
 
        <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> 
 
      </div> 
 
      
 
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> 
 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.min.js"></script> 
 
       
 
     
 
      </body> 
 
     </html>

Также есть нет ";" но «,» в параметрах datepicker, И как @Sachi Tekina сказал, нет необходимости загружать загрузочный диск дважды.

источник

2015-02-20 07:23:29 Aryan

Вы вызываете функцию datepicker перед импортом js-файлов. Также удалите строку ниже, так как вы уже вызываете мини-версию.

<script type="text/javascript" src="js/bootstrap.js"> 
    </script>

Существует также дополнительный </script> тег выше <script type="text/javascript" src="js/bootstrap.js"></script>

Попробуйте так:

<html> 
    <head><link rel="stylesheet" type="text/css" media="screen" 
       href="css/datepicker3.css"> 
    <link rel="stylesheet" href="css/bootstrap.min.css"> 
    <link rel="stylesheet/less" href="less/dropdowns.less"> 
    <link rel="stylesheet/less" href="less/sprites.less"> 
    </head> 
    <body> 
<div class="input-group date" data-date-format="dd-mm-yyyy"> 
      <input type="text" class="form-control" name="date"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span> 
    </div> 

    <script type="text/javascript" src="js/jquery-1.11.2.min.js"> 
    </script> 


    <script type="text/javascript" src="js/bootstrap.min.js"> 
    </script> 
    <script type="text/javascript" src="js/bootstrap-datepicker.js"> 
    </script> 
    <script type="text/javascript" src="js/bootstrap-datepicker.en-GB.js"> 
    </script> 
     <script type="text/javascript"> 
     $(document).ready(function(){ 
     $('.input-group.date').datepicker({ 
       changeMonth: true; 
       changeYear: true; 
     }); 
     }); 
     </script> 
    </body> 
</html>

источник

2015-02-20 07:18:08

Я попробовал, но по какой-то причине он все еще не работает. Спасибо хоть. – Love

Вас приветствуют. Однако попробуйте с $ (document) .ready (function() {}); Проверьте обновленную версию выше. Также есть дополнительная отметка. Также есть ошибки в консоли. Используйте firebug, чтобы найти возможные ошибки. –

Вы можете вставить журнал ошибок с консоли? – Aryan

попробовать с

$('.date').datepicker({ 
      changeMonth: true; 
      changeYear: true; 
    });

см http://runnable.com/UmOlOZbXvZRqAABU/bootstrap-datepicker-example-text-input-with-specifying-date-format2

источник

2015-02-20 07:22:48

Bootstrap datepicker выпадающее меню не падает

ответ

Смежные вопросы