datepicker不起作用。我无法找到我是什么代码

<meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
    <script src="js/bootstrap.min.js" type="text/javascript"></script> 

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
    <script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
    <script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script> 


    <script> 

     $(document).ready(function() { 
      $('#datePicker') 
       .datepicker({ 
        format: 'mm/dd/yyyy' 
       }) 
       .on('changeDate', function(e) { 
        // Revalidate the date field 
        $('#eventForm').formValidation('revalidateField', 'date'); 
       }); 

      $('#eventForm').formValidation({ 
       framework: 'bootstrap', 
       icon: { 
        valid: 'glyphicon glyphicon-ok', 
        invalid: 'glyphicon glyphicon-remove', 
        validating: 'glyphicon glyphicon-refresh' 
       }, 
       fields: { 
        name: { 
         validators: { 
          notEmpty: { 
           message: 'The name is required' 
          } 
         } 
        }, 
        date: { 
         validators: { 
          notEmpty: { 
           message: 'The date is required' 
          }, 
          date: { 
           format: 'MM/DD/YYYY', 
           message: 'The date is not a valid' 
          } 
         } 
        } 
       } 
      }); 
     }); 

    </script> 



      <div class="form-group"> 
       <div class="date"> 
        <div class="input-group input-append date" id="datePicker"> 
         <input type="text" class="form-control" name="date" /> 
         <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
        </div> 
       </div> 
      </div>

缺少这段代码显示了#datepicker输入组件，但在点击，它不会打开。它也不能在调用简单的$（'＃datepicker'）。datepicker（）;方法。请提供一些解决方案。

简单的datepicker（）方法有它自己的默认设置，但我已经在这个方法中做了我自己的定制。

在body标签中定义的div标签中，但我已经简要地说明了它。使用span标签将日期选择器输入组件嵌入图标。在这种情况下，我正在使用glyphicon-calender。但在此之前，我告诉编译器，我将通过编写class =“input-group-addon add-on”来制作一个图标。

来源

2016-04-23 Harpreet Singh

bootstrap.js和jquery ui需要jquery。把jquery放在你的顶端。并删除多个引导脚本定义。

来源

2016-04-23 17:34:26

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script> 
<script src="js/bootstrap-datepicker.min.js" type="text/javascript"></script> 

load jquery.js first and than load all js because juery is requisite for all js.

来源

2016-04-23 17:38:41

它现在：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script> 
 

 
    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> 
 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css"> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js" type="text/javascript"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js" type="text/javascript"></script> 
 

 

 

 
    <script> 
 

 
     $(document).ready(function() { 
 
      $('#datePicker') 
 
       .datepicker({ 
 
        format: 'mm/dd/yyyy' 
 
       }) 
 
       .on('changeDate', function(e) { 
 
        // Revalidate the date field 
 
        $('#eventForm').formValidation('revalidateField', 'date'); 
 
       }); 
 

 
      $('#eventForm').formValidation({ 
 
       framework: 'bootstrap', 
 
       icon: { 
 
        valid: 'glyphicon glyphicon-ok', 
 
        invalid: 'glyphicon glyphicon-remove', 
 
        validating: 'glyphicon glyphicon-refresh' 
 
       }, 
 
       fields: { 
 
        name: { 
 
         validators: { 
 
          notEmpty: { 
 
           message: 'The name is required' 
 
          } 
 
         } 
 
        }, 
 
        date: { 
 
         validators: { 
 
          notEmpty: { 
 
           message: 'The date is required' 
 
          }, 
 
          date: { 
 
           format: 'MM/DD/YYYY', 
 
           message: 'The date is not a valid' 
 
          } 
 
         } 
 
        } 
 
       } 
 
      }); 
 
     }); 
 

 
    </script> 
 

 

 

 
      <div class="form-group"> 
 
       <div class="date"> 
 
        <div class="input-group input-append date" id="datePicker"> 
 
         <input type="text" class="form-control" name="date" /> 
 
         <span class="input-group-addon add-on"><span class="glyphicon glyphicon-calendar"></span></span> 
 
        </div> 
 
       </div> 
 
      </div>

我列入片段jquery-ui.min.js和jquery.min.js和删除您的引导多余的夹杂物。

来源

2016-04-23 17:38:46

它仍然不工作。这个回答是针对所有3个答案的 –

我编辑了回复。它现在有效 –

datepicker不起作用。我无法找到我是什么代码

回答

相关问题