Angular UI Bootstrap DatePicker - выберите выбранную дату при закрытии/размытии

У меня есть ng-repeat с каждой строкой, имеющей несколько UI-Bootstrap Datepickers. Я пытаюсь вызвать функцию в моем контроллере, когда выбрана дата, и сборщик закрывается. Я попытался использовать 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>

Ответы

Ответ 1

Я решил это, используя: ng-change="myChangeFunction()".

Ответ 2

Это возможно с помощью ng-change :

html/jsp file

 <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
};

Ответ 3

Вы можете поместить $watch в свой контроллер для вашей переменной даты.

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

Ответ 4

Я тоже занимался этим, и onChange не будет делать эту работу для меня, поэтому я пошел в ui bootstrap.js и добавил некоторые вещи. Затем я могу установить функцию, которая будет вызываться в HTML через атрибут on-close.

<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: '&' }

есть 3 варианта, как закрыть выбор выбора выбора, щелкнуть в другом месте или сделать кнопку. вы можете легко найти его, его единственное место, где isOpen установлено на false

scope.isOpen = false;

Затем я просто вызываю функцию в тех трех местах, где я вызываю функцию из атрибута

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

Если вы хотите, чтобы ui-bootstrap.js PM меня, я сделал это только в версии tpl.