angularJS 在图标点击时隐藏 bootstrap 日期选择器

Question

在我的应用程序中，我尝试使用 bootstrap 日期选择器

但我有一个麻烦：当它显示时如何在图标和其他字段（如果我需要的话）上隐藏它？

我的看法：

              <div class="input-group date custom">
                <input type="text" id="date" data-ng-model="article.Date" name="date" class="form-control" required/><span class="input-group-addon"><i class="date-ico"></i></span>
              </div>

和指令（它的声明是模态的window）：

  .directive('dateClick', function ($window) {
     return {
      restrict: 'EA',
      link: function (scope, element, attrs) { 
        var dateIcon = element.find('.date-icon');        
        dateIcon.bind('click', function () {
          var datepckr = angular.element(document).find('.datepicker');
          if (typeof datepckr[0] !== 'undefined'){
            console.log('hide');
            var datepckrMenu = angular.element(document).find('.datepicker.dropdown-menu');
            datepckrMenu.datepicker('hide');
          }
        });
      }
    }
});

我怎样才能以最好的方式隐藏我的日期选择器？

我还看到，如果我在 textAngular 的编辑器中单击，它不会隐藏...

Answer 1

你可以帮我试试，有帮助...

Live Demo

github Link

<div>
    <div data-ng-controller="AppCtrl">
        <input id="datepicker" type="text" data-ng-datepicker data-ng-options="datepickerOptions" data-ng-model="date">
        <input id="datepickerMirror" type="text" data-ng-model="date">
    </div>
</div>

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.css">
<script src="http://code.jquery.com/jquery-2.0.2.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="https://rawgithub.com/cletourneau/angular-bootstrap-datepicker/master/dist/angular-bootstrap-datepicker.js" charset="utf-8"></script>

Js 脚本

app = angular.module 'myapp', ['ng-bootstrap-datepicker']

AppCtrl = ($scope)->
  $scope.datepickerOptions =
    format: 'yyyy-mm-dd'
    language: 'fr'
    autoclose: true
    weekStart: 0

  $scope.date = '2000-03-12'

app.controller 'AppCtrl', AppCtrl    
angular.bootstrap document, ['myapp']

angularJS 在图标点击时隐藏 bootstrap 日期选择器

angularJS hide bootstrap datepicker on icon click

javascript

jquery

datepicker

twitter-bootstrap

angularjs