Angular UI Bootstrap DatePicker语言 - 在关闭/模糊时获取选定的日期

Question

我有一个ng-repeat，每行有多个ui引导日期拾取器。我试图调用一个函数在我的控制器当日期被选中和选择器关闭。我已经尝试使用UI-Event来捕获模糊事件，但是当这个被调用时模型还没有更新。我的问题是我怎么能得到选定的日期时，选择器关闭?我可以做一些像ui-event="{ blur : 'myBlurFunction( $event, this.text)' }，或者有另一种方法来获得数据与onClose事件?

<li ng-repeat="....">
   <div ng-click="openEditStartCal($event, ticket)">
                <input ui-event="{ blur : 'blurredStartDate( $event, ticket, this.text)' }" 
                       type="text" 
                       starting-day="2" 
                       show-button-bar="false" 
                       show-weeks="false" 
                       class="form-control addTicketDateInput" 
                       datepicker-popup="dd MMM" 
                       ng-model="ticket.StartDate" 
                       is-open="startEditTicketOpened && currentTicketUpdating == ticket.TicketId" 
                       min-date="{{today()}}" 
                       max-date="'2015-06-22'" 
                       datepicker-options="dateOptions" 
                       date-disabled="disabled(date, mode)"  
                       ng-required="true" close-text="Close" />
   </div>

Answer 1

我用ng-change="myChangeFunction()"解决了这个问题。

Answer 2

可以使用ng-change :

html/jsp文件

 <input type="text" 
    id="StartDate" 
    name="StartDate"  
    class="form-control input-sm" 
    uib-datepicker-popup="{{format}}" 
    ng-model="StartDateVal" 
    is-open="status.opened" 
    min-date="min" 
    max-date="max"
    datepicker-options="dateOptions" 
    date-disabled="disabled(date, mode)" 
    ng-required="true"
    close-text="Close" 
    readonly="true" 
    ng-change="select(StartDateVal)" />

. js控制器

$scope.select = function(date) { 
      // here you will get updated date
};

Answer 3

你可以在你的控制器中设置一个$watch作为date变量。

$scope.$watch('ticket.StartDate',function(){
  var date = $scope.ticket.StartDate;
});

Answer 4

我也在处理这个，onChange不会为我做这项工作，所以我去了ui bootstrap .js并添加了一些东西。然后我可以通过on-close属性设置在HTML中调用的函数。

<input type="text" on-close="dateClosed()" ng-model="date" datepicker-popup="dd.MM.yyyy" is-open="dateOpened" ng-click="dateOpened=true"  />

那么你需要在

处修改ui-bootstrap.js

.directive('datepickerPopup' ... function(...) ... return { ...
scope: { ... , onClose: '&' }

有三个选项如何关闭选择器-日期选择，单击其他地方或完成按钮。你可以很容易地找到它，它是唯一一个isOpen被设置为false的地方

scope.isOpen = false;

然后我只是在这3个地方调用一个函数，我从属性

调用函数

scope.onClosing = function () {
            if (angular.isDefined(attrs.onClose))
                scope.onClose();
        } 

如果你想要ui-bootstrap.js PM me，我只在tpl版本中做过。