angularJS在图标点击时隐藏引导日期选择器答案

【问题标题】：angularJS hide bootstrap datepicker on icon clickangularJS在图标点击时隐藏引导日期选择器
【发布时间】：2015-01-12 10:41:42
【问题描述】：

在我的应用中，我尝试使用引导日期选择器

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

我的看法：

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

和指令（它的声明在模态窗口上）：

  .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 的编辑器，它并没有隐藏...

【问题讨论】：

你确定是图像问题吗？我认为它更多的是usemin/filerev。请发布更完整的 gruntfile
我认为最好的方法是使用 angular-ui datepicker 指令。 angular-ui.github.io/bootstrap

标签： javascript jquery angularjs twitter-bootstrap datepicker

【解决方案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']

【讨论】：