Angularjs 使用控制器而不是 $scope 的简单日期选择器

Question

我正在尝试将 angular-ui bootstrap 用于日期范围。

http://angular-ui.github.io/bootstrap/#/datepicker

link 包含一些很好的示例。但是我想使用 controller as 语法而不是上面 link 中显示的范围。

我已经尝试过，如下所示。但它在点击时不显示日历框。它也没有返回任何错误，所以我对我需要做什么有点迷茫。我认为我的例子很接近。

这是我在 fiddle

上的尝试

下面的代码片段..

js_file.js

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function() {

  self = this;
  self.someProp = 'Check This value displays.. confirms controller initalised'

  self.opened = {};
  self.open = function($event) {

    $event.preventDefault();
    $event.stopPropagation();

    self.opened = {};
    self.opened[$event.target.id] = true;

    // log this to check if its setting the log    
    console.log(self.opened);

  };

  self.format = 'dd-MM-yyyy'
});

index.html

<body>
<div ng-controller="DatepickerDemoCtrl as demo">
<style>
  #dateFrom, #dateTo { width: 200px;}
</style>

  {{ demo.someProp }}

  <div class="form-group">

      <div class="input-group">

          <input type="text" 
            class="form-control date" 
            id="dateFrom" 
            placeholder="From" 
            ng-click="demo.open($event)"   
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtFrom" 
            is-open="demo.dateFrom" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >


          <input type="text" 
            class="form-control date" 
            id="dateTo"   
            placeholder="To" 
            ng-click="demo.open($event)"  
            datepicker-popup="{{demo.format}}" 
            ng-model="demo.dtTo" 
            is-open="demo.dateTo" 
            min-date="minDate" 
            max-date="'2015-06-22'" 
            datepicker-options="dateOptions" 
            date-disabled="disabled(date, mode)" 
            ng-required="true" 
            close-text="Close" >

      </div>

  </div>

</div>
</body>

Answer 1

这里的问题似乎是从 UI Bootstrap 0.11.0 开始他们已经删除了 "open on focus"。（查看来源）

下面的 plunkr 显示了一种可能的解决方法，即使用 ng-click 打开日期选择器。

将您当前的 ng-click 从 dateFrom 输入更改为：

ng-click="demo.dateFrom=true"

dateTo 的输入字段为：

ng-click="demo.dateTo=true"

Plunkr - Working Bootstrap Date-picker

下面的源代码显示了其他几种解决方法，如果您正在寻找一种可以在焦点上打开日期选择器而不是使用 ng-click 的解决方案。

来源：UI Bootstrap Github

Angularjs 使用控制器而不是 $scope 的简单日期选择器

Angularjs simple datepicker using controller as not $scope

daterangepicker

angularjs

angular-ui-bootstrap