2

I am trying to use the angular-ui bootstrap for dateranges.

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

The link contains some good examples. However I want to use controller as syntax and not the scope as it shows in the link above.

I have attempted it as seen below. But its not showing the calendar box when its clicked on. Its not returning any errors either so im a bit lost as to what I need to do. I think my example is close.

Here is my attempt on fiddle

Code snippets below..

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>
4

1 回答 1

6

这里的问题似乎是，自从 UI Bootstrap 0.11.0 以来，他们已经删除了“焦点打开”。（见来源）

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

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

ng-click="demo.dateFrom=true"

以及 dateTo 的输入字段：

ng-click="demo.dateTo=true"

Plunkr - 工作引导日期选择器

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

来源：UI Bootstrap Github

于 2015-01-29T18:55:00.240 回答