为什么我的引导日期选取器不起作用？

我试图使用引导日期选择器（https://github.com/eternicode/bootstrap-datepicker），但我无法使它工作。为什么我的引导日期选取器不起作用？

上的jsfiddle一切就像一个魅力：http://jsfiddle.net/hwuktpt2/

实际页面上的一些失败的测试后，我甚至尝试新的空白页面，并重新整合一切从头开始。 jQuery的作品，Bootstrap样式的作品，Datatables的作品，但我不能让日期选择工作。

有什么建议吗？

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.css"/> 
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker.min.css"/> 
    <script type="text/javascript" src="https://cdn.datatables.net/u/bs-3.3.6/jq-2.2.3,jszip-2.5.0,pdfmake-0.1.18,dt-1.10.12,b-1.2.0,b-colvis-1.2.0,b-html5-1.2.0,b-print-1.2.0,fh-3.1.2,se-1.2.0/datatables.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/js/bootstrap-datepicker.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/locales/bootstrap-datepicker.de.min.js"></script> 
    <script type="text/javascript"> 
     $('.date_picker input').datepicker({ 
      format: "dd.mm.yyyy", 
      todayBtn: "linked", 
      language: "de" 
     }); 
    </script> 
    <style type="text/css"> 
     .control-label { 
      padding-top:7px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="page-header"> 
      Neues Mobile Device anlegen 
     </div> 
    </div> 
    <div class="container"> 
     <form class="form-horizontal" name="mobdev_neu" action="mobdev_neu.php" method="post"> 
     <div class="form-group"> 
      <label for="mobdev_neu_type" class="col-xs-2 control-label">Type</label> 
      <div class="col-xs-10"> 
      <select id="mobdev_neu_type" class="form-control" name="mobdev_neu_type" REQUIRED> 
       <option value="">-- Bitte auswählen --</option> 
      </select> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="mobdev_neu_imei" class="col-xs-2 control-label">IMEI</label> 
      <div class="col-xs-10"> 
      <input type="text" id="mobdev_neu_imei" class="form-control" name="mobdev_neu_imei" placeholder="Pflichtfeld" REQUIRED> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="mobdev_neu_kaufdatum" class="col-xs-2 control-label">Kaufdatum</label> 
      <div class="col-xs-10 date_picker"> 
      <input type="text" id="mobdev_neu_kaufdatum" class="form-control" name="mobdev_neu_kaufdatum" placeholder="Pflichtfeld"> 
      </div> 
     </div> 
     </form> 
    </div> 
</body>

来源

2016-05-31 Daniel

裹日期选择在初始化的document.ready电话。这个代码在dom完成从外观加载之前运行。由于JavaScript被解释，所以它在浏览器读取时运行。由于您在头部定义代码，因此尚未加载正文及其内容;所以选择器找不到任何元素来初始化datepicker。如果你不想使用document.ready功能，你也可以将脚本移动到body标签的末尾。

$(function(){ 
     $('.date_picker input').datepicker({ 
      format: "dd.mm.yyyy", 
      todayBtn: "linked", 
      language: "de" 
     }); 
    });

来源

2016-05-31 13:59:31

现在完美地工作...有时它很容易... 感谢您的帮助！ – Daniel

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" /> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>    
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>

，你想使日期字段使用你的身体下面这段代码使用后使用这些库。

<div class='input-group date' id='datetimepicker1'> 
<input type='text' class="form-control" name="update_time" placeholder="Update Date"/> 
         <span class="input-group-addon"> 
          <span class="glyphicon glyphicon-calendar"></span> 
         </span> 
        </div> 
        <script type="text/javascript"> 
         var j = jQuery.noConflict(); 
         j(function() { 
          j('#datetimepicker1').datetimepicker({ 
           format: 'L', 
           disabledHours: true, 
          }); 
         }); 
        </script>

来源

2016-05-31 14:15:01 user6444905

为什么我的引导日期选取器不起作用？

回答

相关问题