Question

我正在尝试使用angular-ui bootstrap作为日期范围。

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

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

我尝试过如下所示。但它点击时没有显示日历框。它没有返回任何错误，所以我有点失去了我需要做的事情。我认为我的例子很接近。

以下是我对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已经删除了“焦点打开”。（见来源）

下面的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使用控制器作为非范围的简单日期选择器

1 个答案: