Angular Bootstrap DatePicker 指令（Eternicode 版本）未保持打开状态

Posted 2023-05-07

【中文标题】Angular Bootstrap DatePicker 指令（Eternicode 版本）未保持打开状态

【英文标题】：Angular Bootstrap DatePicker Directive (Eternicode version) not staying open

【发布时间】：2016-01-25 21:37:13

【问题描述】：

我正在努力将Eternicode's Bootstrap Datepicker 集成到我的应用中。我不确定如何将它连接到我的模型，所以我从here 找到了一个使用它的指令。现在我的页面上有日期选择器，但是当我单击输入字段时它不会保持打开状态。日期选择器几乎立即打开和关闭。如果我单击相邻字段并在 datepicker 字段中单击标签，它将按预期保持打开状态。我也很难让它出现在我想要的位置。当它打开时，它位于其他一些元素之下并且不合适。它应该直接在输入字段下方打开。请看下面的截图。

在我的控制器中，我有：

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

我创建了一个小提琴，但我无法让它正常工作。我收到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: "[e-mail]",
            created_at: "2015-10-27T16:24:00.832Z",
            updated_at: "2015-11-01T16:11:52.426Z",
            company_id: 94
        
    

【问题讨论】：

你能提供一个小提琴吗？

我创建了一个小提琴，但我无法让它正常工作。我收到Uncaught Error: [$injector:modulerr] 错误，我不知道如何解决。这是链接：jsfiddle.net/kxge3cqf

@ACIDSTEALTH 我在本地环境中复制了代码，而[$injector:modulerr] 似乎是因为angular.module('myApp', ['ui.bootstrap'])，这里没有定义ui.bootstrap，在从外部链接包含它之后，我又得到了@987654340 @ 和 groups.json 和 socila_media_posts.json 类似，你能提供这些文件或虚拟数据吗？这样我就可以调查了。但是，当我尝试分离出 detepicker 部分以及它有什么问题时。

顺便说一句，如果有帮助，我会为这个 plnkr.co/edit/tmcBSmkY6445KDZpbt2z?p=preview 找到一个有效的 plunk

我已将来自所有三个端点的示例数据添加到帖子中。此外，您上一条评论中的 Plunk 不起作用。日期选择器打开，但无法选择日期。

【参考方案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

你为什么不使用 default type="date" 之类的

<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 我可以弄清楚到底是什么问题。但目前这就是我所拥有的。希望对你有帮助

【讨论】：

我将此标记为答案，因为它立即解决了日期选择器打开/关闭的问题。我的老板决定暂时采用更简单的实现（日/月/年下拉菜单），所以我没有机会回去彻底测试解决方案，但根据我在博客文章和 Plunck 中看到的内容，我认为这足以让我下次尝试解决这个问题（可能很快）。谢谢！

@ACIDSTEALTH 在回答这个问题时我偶然发现了amsul.ca/pickadate.js/date 或github.com/alongubkin/angular-datepicker（都一样）我喜欢它的 ui，没用过这个，但是 ui 很好

这两个看起来都很恶心。比 Bootstrap 风格好很多。