angularJS hide bootstrap datepicker on icon click

brgchamk 于 2023-06-04 发布在 Bootstrap

关注(0)|答案(1)|浏览(204)

在我的应用程序中，我尝试使用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的编辑器中单击，它并没有隐藏…

twitter-bootstrap

来源：https://stackoverflow.com/questions/27900112/angularjs-hide-bootstrap-datepicker-on-icon-click

1条答案

按热度按时间

idv4meu81#

尝试以下操作：
Live Demo
Repository 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']

赞(0）回复(0）举报 2023-06-04

我来回答

angularJS hide bootstrap datepicker on icon click

1条答案

相关问题

热门标签

最新问答