当 datepicker 和相邻元素之间没有空格时，Angular-Datepicker 不起作用？答案

【问题标题】：Angular-Datepicker does not work when there is no space between datepicker and adjacent element?当 datepicker 和相邻元素之间没有空格时，Angular-Datepicker 不起作用？
【发布时间】：2017-10-01 03:16:25
【问题描述】：

我想知道它不工作的原因？看看这个codepen。我尝试在每个 datepicker 类型中一个接一个地使用两个引导输入，并在底部添加了更多元素，但它们并不能像应有的那样直接工作。我想知道内心深处的原因。

<html>
  <head>
    <meta charset="utf-8">
    <title>Angular Date-Picker</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://rawgit.com/720kb/angular-datepicker/master/src/css/angular-datepicker.css">

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-route.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/720kb/angular-datepicker/master/src/js/angular-datepicker.js"></script>
  </head>
  <body ng-app="myApp">
    <div class="container">

      <div ng-controller="MainCtrl">
        <!-- This is the test template that eill be loaded into view -->
        <h1>Test Template</h1>

        <br><br>
        <div class="well text-center">
          {{date}}
        </div>

        <div class="row">
          <div class="col-md-4">

            <!-- Start Date -->
            <div class="form-group">
              <datepicker date-format="dd/MM/yyyy">
                <input ng-model="date" type="text"
                  placeholder="Start Date" class="form-control"/>
              </datepicker>
            </div>

            <!-- Uncomment to make it work -->
            <!--<br>-->
            <!-- End Date -->
            <div class="form-group">
              <datepicker date-format="dd/MM/yyyy">
                <input ng-model="date" type="text"
                  placeholder="End Date" class="form-control"/>
              </datepicker>
            </div>

            <!-- Uncomment to make it work -->
            <!--<br>-->
            <div class="checkbox" ng-repeat="i in list">
              <label>
                <input type="checkbox" value="">
                {{i}}
              </label>
            </div>

          </div>
        </div>


      </div>
    </div>

    <script>
      var app = angular.module('myApp', ['720kb.datepicker']);

      /**
      * CONTROLLER
      * ========================================
      */
      app.controller('MainCtrl', ['$scope', function($scope) {
        $scope.name = "Rj";
        $scope.list = ["item 1", "item 2", "item 3"];
      }]);

    </script>

  </body>
</html>

【问题讨论】：

尝试使用浏览器的元素检查器对其进行调试：O，您的复选框 div 与选择器重叠
codepen.io/anon/pen/aWybMR
谢谢大家！

标签： javascript jquery angularjs datepicker

【解决方案1】：

您的元素重叠，因此事件无法正确触发

设置以下css：

.form-group {
    display: inline-block;
}

演示：https://codepen.io/anon/pen/JNyjVw

另一种解决方案是将您的输入包装在 .row div 中

https://codepen.io/anon/pen/LyjYwv

或将.clearfix 添加到.form-group div

https://codepen.io/anon/pen/PmKwoN

【讨论】：

如果他不想要元素之间的边距，他应该为每个元素类设置样式，嗯
感谢大家的解释！，傻瓜我以为会有一些基于 js 的原因！