Question

在我的应用程序中，我尝试使用bootstrap datepicker

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

我的观点：

              <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的编辑器，它就无法隐藏......

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 datepicker

1 个答案: