Question

我尝试使用Bootstrap日期选择器（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>

Answer 1

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

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

Answer 2

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

为什么我的Bootstrap日期选择器无法正常工作？

2 个答案: