Javascript 为什么我的引导日期选择器不工作？_Javascript_Jquery_Twitter Bootstrap

Javascript 为什么我的引导日期选择器不工作？

javascript jquery twitter-bootstrap

Javascript 为什么我的引导日期选择器不工作？,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我尝试使用Bootstrap日期选择器（），但无法使其工作在JSFIDLE上，一切都像一个符咒：在实际页面上进行了一些失败的测试之后，我甚至尝试了一个空白的新页面，并重新整合了所有内容。jQuery工作，引导样式工作，数据表工作，但我就是不能让日期选择器工作有什么建议吗 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="X

我尝试使用Bootstrap日期选择器（），但无法使其工作

在JSFIDLE上，一切都像一个符咒：

在实际页面上进行了一些失败的测试之后，我甚至尝试了一个空白的新页面，并重新整合了所有内容。jQuery工作，引导样式工作，数据表工作，但我就是不能让日期选择器工作

有什么建议吗

<!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>


$（'.date_picker输入'）.datepicker({
格式：“dd.mm.yyyy”，
今日BTN：“链接”，
语言：“德”
});
.控制标签{
填充顶部：7px；
}
Neues移动设备安乐根
类型
--奥斯瓦伦比特酒店--
伊梅
考夫达姆

将日期选择器初始化调用包装在一个document.ready中。从外观上看，这段代码是在dom加载完成之前运行的。由于JavaScript是在浏览器读取时被解释的，所以它是在浏览器读取时运行的。因为您在头部定义代码，所以主体及其内容尚未加载；因此选择器找不到要初始化datepicker的元素。如果不想使用document.ready功能，还可以将脚本移动到body标记的末尾

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

在使用以下代码后使用这些库，在您想要创建日期字段的正文中使用这些代码

<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>


var j=jQuery.noConflict（）；
j（函数（）{
j（'#datetimepicker1'）。datetimepicker({
格式：“L”，
是的，
});
});

现在工作得非常好…有时很简单。。。谢谢你的帮助！

<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>