angularjs - Angular Bootstrap DatePicker 指令(Eternicode 版本)未保持打开状态

Question

我正在整合 Eternicode's Bootstrap Datepicker进入我的应用程序。我不确定如何将它连接到我的模型，所以我从 here 找到了一个使用它的指令。 .现在我的页面上有日期选择器，但是当我单击输入字段时它不会保持打开状态。日期选择器几乎立即打开和关闭。如果我点击相邻的字段并进入日期选择器字段，它会按预期保持打开状态。我也有问题让它出现在我想要的地方。当它打开时，它位于其他一些元素下并且不合适。它应该直接在输入字段下方打开。请参阅下面的屏幕截图。



在我的 Controller 中，我有:

$scope.dateOptions = {
    format: 'dd/mm/yyyy',
    autoclose: false,
    clearBtn: true,
    container: '#datepicker',
    showOnFocus: true,
    startDate: new Date(),
    todayBtn: true,
    todayHighlight: true,
    weekStart: 1,
    zIndexOffset: 5000
}
$scope.newPost = {
    token: $scope.token,
    post: $scope.post,
    posts: {
        twitter: null,
        facebook: null,
        linkedin: null
    },
    attachment_url: $scope.attachment_url,
    media_url: $scope.media_url,
    services: {
        twitter: $scope.twitter,
        facebook: $scope.facebook,
        linkedin: $scope.linkedin
    },
    dateObject: today,
    timeObject: today
};

然后在我的指令中我有:

.directive('bDatepicker', function(){
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function ($scope, element, attrs, controller) {
            var updateModel, onblur;

            if (controller != null) {

                updateModel = function (event) {
                    element.datepicker('hide');
                    element.blur();
                };

                onblur = function () {
                    //we'll update the model in the blur() handler
                    //because it's possible the user put in an invalid date
                    //in the input box directly.
                    //Bootstrap datepicker will have overwritten invalid values
                    //on blur with today's date so we'll stick that in the model.
                    //this assumes that the forceParse option has been left as default(true)
                    //https://github.com/eternicode/bootstrap-datepicker#forceparse
                    var date = element.val();
                    return $scope.$apply(function () {
                        return controller.$setViewValue(date);
                    });
                };

                controller.$render = function () {
                    var date = controller.$viewValue;
                    if (angular.isDefined(date) && date != null && angular.isDate(date))
                    {
                        element.datepicker().data().datepicker.date = date;
                        element.datepicker('setValue');
                        element.datepicker('update');
                    } else if (angular.isDefined(date)) {
                        throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
                    }
                    return controller.$viewValue;
                };
            }
            return attrs.$observe('bDatepicker', function (value) {
                var options;
                options = { }; //<--- insert your own defaults here!
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof (value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel).on('blur', onblur);
            })
        }
    }
});

最后在我看来，我有:

<input b-datepicker="{{dateOptions}}" ng-model="newPost.dateObject" id="datepicker">

我创建了一个 fiddle ，但我无法让它正常工作。我收到了 Uncaught Error: [$injector:modulerr]我无法弄清楚如何解决的错误。这是链接: https://jsfiddle.net/kxge3cqf/

这是来自`social_media_posts.json 的示例:

[
    {
        id: 50,
        company_id: 94,
        employer_id: 3,
        post: "testing without attachments",
        attachment_url: null,
        twitter: true,
        facebook: false,
        linkedin: false,
        post_date: "Fri, Oct 30, 2015",
        post_time: " 2:50 PM EDT"
    },
    {
        total_count: 1
    }
]

这是来自 groups.json 的样本:

{
    groups: {
        1: {
            id: 1,
            name: "Human Resources",
            created_at: "2015-10-27T16:23:07.287Z",
            updated_at: "2015-11-01T16:11:43.329Z",
            company_id: 94
        },
        2: {
            id: 2,
            name: "Marketing",
            created_at: "2015-11-01T15:32:28.988Z",
            updated_at: "2015-11-01T16:11:43.354Z",
            company_id: 94
        }
    }
}

这是来自 contacts.json 的样本:

{
    contacts: {
        1: {
            id: 1,
            first_name: "Foo",
            last_name: "Bar",
            email: "foo.bar@baz.biz",
            created_at: "2015-10-27T16:24:00.832Z",
            updated_at: "2015-11-01T16:11:52.426Z",
            company_id: 94
        }
    }
}

Answer 1

这似乎是你的问题

$event.stopPropagation();

angular.module('peskyDatepicker', ['ui.bootstrap'])
.controller('DatepickerDemoCtrl', ['$scope',
function ($scope) {
  
  var vm = this;
  
  vm.valuationDate = new Date();
  vm.valuationDatePickerIsOpen = false;
  vm.opens = [];
  
  $scope.$watch(function () {
       return vm.valuationDatePickerIsOpen;
   },function(value){
      vm.opens.push("valuationDatePickerIsOpen: " + value + " at: " + new Date());
   });
  
  vm.valuationDatePickerOpen = function ($event) {
    
      if ($event) {
          $event.preventDefault();
          $event.stopPropagation(); // This is the magic
      }
      this.valuationDatePickerIsOpen = true;
  };
}]);

<!DOCTYPE html>
<html ng-app="peskyDatepicker">

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div ng-controller="DatepickerDemoCtrl as vm">
      <pre>Selected date is: <em>{{vm.valuationDate | date:'fullDate' }}</em>
      </pre>
      <div class="row">
        <div class="col-md-3">
          <p class="input-group">
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" 
                      ng-click="vm.valuationDatePickerOpen()">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
            <input type="text" class="form-control" 
                   datepicker-popup="mediumDate" 
                   is-open="vm.valuationDatePickerIsOpen" 
                   ng-click="vm.valuationDatePickerOpen()" 
                   ng-model="vm.valuationDate" />
            <span class="input-group-btn">
              <button type="button" class="btn btn-default" 
                      ng-click="vm.valuationDatePickerOpen($event)">
                <i class="glyphicon glyphicon-calendar"></i>
              </button>
            </span>
          </p>
        </div>
      </div>
      <p class="col-md-3">
        The left button <em>doesn't</em> work (opens the picker and closes right away).<br />
        The right button <em>does</em> work (opens the picker and stays open).<br />
        And it's all down to <code>$event.stopPropagation();</code> - funny huh?</code>
      </p>
      <ul>
        <li ng-repeat="open in vm.opens">{{open}}</li>
      </ul>
    </div>
  </body>

</html>

还有一个关于这个问题的博客
http://blog.johnnyreilly.com/2015/05/angular-ui-bootstrap-datepicker-weirdness.html

将尝试找出您的代码中到底有什么问题，到您可能会查看它的时候。

编辑 1

你为什么不使用默认类型=“日期”之类的

<input type="date" ng-model="date" value="{{ date | date: 'yyyy/MM/dd' }}" />
<br />{{ date | date: 'dd/MM/yyyy' }} 

编辑 2

好的，试过你的代码，只取出与日期相关的部分，它工作正常。

因此，您的代码中肯定还有其他原因导致了这种情况。
这是我试过的代码，如果有帮助

angular.module('ui.bootstrap.demo', ['ngAnimate']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function($scope,$filter) {
    $scope.dateOptions = {
        format: 'dd/mm/yyyy',
        autoclose: false,
        clearBtn: true,
        // container: '#datepicker',
        showOnFocus: true,
        startDate: new Date(),
        todayBtn: true,
        todayHighlight: true,
        weekStart: 1,
        zIndexOffset: 5000
    }
});

angular.module('ui.bootstrap.demo').directive('bDatepicker', function() {
    return {
        require: '?ngModel',
        restrict: 'A',
        link: function($scope, element, attrs, controller) {
            var updateModel, onblur;

            if (controller != null) {

                updateModel = function(event) {
                    console.log($scope.dateObject);
                    element.datepicker('hide');
                    element.blur();
                };

                onblur = function() {
                    //we'll update the model in the blur() handler
                    //because it's possible the user put in an invalid date
                    //in the input box directly.
                    //Bootstrap datepicker will have overwritten invalid values
                    //on blur with today's date so we'll stick that in the model.
                    //this assumes that the forceParse option has been left as default(true)
                    //https://github.com/eternicode/bootstrap-datepicker#forceparse
                    var date = element.val();
                    return $scope.$apply(function() {
                        return controller.$setViewValue(date);
                    });
                };

                controller.$render = function() {
                    var date = controller.$viewValue;
                    if (angular.isDefined(date) && date != null && angular.isDate(date)) {
                        // element.datepicker().data().datepicker.date = date;
                        element.datepicker('update', date);
                        element.datepicker('setValue');
                        element.datepicker('update');
                    } else if (angular.isDefined(date)) {
                        throw new Error('ng-Model value must be a Date object - currently it is a ' + typeof date + ' - use ui-date-format to convert it from a string');
                    }
                    return controller.$viewValue;
                };
            }
            return attrs.$observe('bDatepicker', function(value) {
                var options;
                options = {}; //<--- insert your own defaults here!
                if (angular.isObject(value)) {
                    options = value;
                }
                if (typeof(value) === "string" && value.length > 0) {
                    options = angular.fromJson(value);
                }
                return element.datepicker(options).on('changeDate', updateModel).on('blur', onblur);
            })
        }
    }
});

<!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.js"></script>
    <script src="example.js"></script>
    <!-- <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.standalone.min.css" rel="stylesheet">
</head>

<body ng-controller="DatepickerDemoCtrl">
    <input b-datepicker="{{dateOptions}}" ng-model="dateObject" id="datepicker" >
    </br>
    Date: {{dateObject}}
</body>

</html>

如果您可以提供一些 git repo 或一个有效的 plunk/fiddle，我可以弄清楚到底出了什么问题。但目前这就是我所拥有的。希望能帮助到你