当日期选择器和相邻元素之间没有空格时，Angular-Datepicker不起作用？

Question

我想知道为什么它不起作用？ 看看这个codepen 。 我尝试使用两个bootstrap输入，每个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>

Answer 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

当日期选择器和相邻元素之间没有空格时，Angular-Datepicker不起作用？

问题描述

1 个解决方案

解决方案1
2 已采纳 2017-05-03 10:36:03

当日期选择器和相邻元素之间没有空格时，Angular-Datepicker不起作用？

问题描述

1 个解决方案

解决方案1 2 已采纳 2017-05-03 10:36:03

解决方案1
2 已采纳 2017-05-03 10:36:03