AngularJS和jQuery的日历指令在点击引导图标时工作

AngularJS and jQuery Calendar Directive to work when clicking on Bootstrap glyphicon?

本文关键字：图标 工作 jQuery 日历 指令 AngularJS      更新时间：2023-09-26

到目前为止，我已经使用AngularJS和jQuery为我的日历创建了一个指令。当用户选择输入框时，jQuery的日期拾取器将弹出。我还试图使它，以便用户可以点击Bootstrap的"glyphicon glyphicon-calendar"弹出jQuery的日期选择器。我现在被困住了，不知道该怎么办。我创建了一个jsfiddle，这样你们就能明白我的意思了。

http://jsfiddle.net/U3pVM/3696/

下面是代码示例: 
<div ng-app="App">
   <div class="input-group"> 
     <span class="input-group-addon">
       <span class="glyphicon glyphicon-calendar"></span>
     </span>
     <input type="text" name="startDate" calendar ng-model="startDate" class="form-control" placeholder="mm/dd/yyyy" ng-minlength="10"></input>
   </div>
 </div>

  var app = angular.module('App', [])
  app.directive('calendar', function () {
      return {
             require: 'ngModel',
             link: function (scope, el, attr, ngModel) {
              $(el).datepicker({
                  minDate: 0,
                  dateFormat: 'MM d, yy',
                  onSelect: function (dateText) {
                      scope.$apply(function () {
                          ngModel.$setViewValue(dateText);
                      });
                  }
              });
          }
      };
  })

下面的例子基于您的小提琴。它添加了一个data属性，该属性驱动对jquery的show方法的调用。为了简洁起见，我只是让'show'值挂在$rootScope上。您不会希望在您的最终代码中这样做。

这种数据属性驱动的函数映射对于您希望公开的任何以二进制方式操作的函数或函数集都很有效，on-off， show-hide等。

砰砰作响的例子…http://plnkr.co/edit/PHzaYP?p=preview 

<body>
<button ng-click="show=!show">Show={{show}}</button>
<input data-show="{{show}}" 
       type="text" 
       name="startDate" 
       calendar2 
       ng-model="startDate" 
       class="form-control" 
       placeholder="mm/dd/yyyy" 
       ng-minlength="10"></input>
<script>
angular.element(document).ready(function(){
    var app = angular.module('app', []);
    app.directive('calendar2', function () {
      return {
        require: 'ngModel',
        link: function (scope, el, attr, ngModel) {
            attr.$observe("show",function(val){
                if(val=='true'){
                    $(el).datepicker( "show" );
                }
                else{
                    $(el).datepicker( "hide" );
                }
            });
            $(el).datepicker({
                minDate: 0,
                dateFormat: 'MM d, yy',
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
              });
            }
          };
        });
    angular.bootstrap(document,["app"]);
});
</script>
相关文章：