19

I have an ng-repeat with each row having multiple UI-Bootstrap Datepickers. I am trying to call a function in my controller when the date is selected and the picker closes. I have tried using UI-Event to capture the blur event but the model hasn't been updated when this gets called. My question is how can I get the selected date when the picker closes? Can I do something like ui-event="{ blur : 'myBlurFunction( $event, this.text)' }, or is there another way to get the data with an onClose event?

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

4 Answers 4

34

I have solved this by using: ng-change="myChangeFunction()".

1
  • This achieved the desired results for us. Thank you for this. :) May 2, 2016 at 19:22
8

This is possible using 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 Controller

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

You can put a $watch in your controller for your date variable.

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

I was dealing with this as well and onChange won't do the job for me, so I went to ui bootstrap .js and added some things. Then I can set a function to be called in HTML via on-close attribute.

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

then you need to change the ui-bootstrap.js at

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

there are 3 options how to close the picker - date selection, click elsewhere or done button. you can find it easily, its the only place where isOpen is set to false

scope.isOpen = false;

Then i just call a function at those 3 places, where i call the function from the attribute

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

If you want the ui-bootstrap.js PM me, I did it in the tpls version only tho.

3
  • if you have a link to your version of ui-bootstrap I'd appreciate it. I am dealing with this issue currently. what is your email? @Mara patricktlawler@gmail.com
    – trickpatty
    Jan 26, 2015 at 22:30
  • 3
    I'd strongly recommend not messing with core bootstrap files (especially minified ones) unless absolutely necessary for debugging, and you're not ever going to use on an actual production site. If someone were to upgrade, you'd lose all your changes. It's just not a viable solution, though it is a smart idea.
    – coblr
    Aug 7, 2015 at 19:31
  • Hi, all I did was add extra attribute for the directive, but as @fractalspawn said, its not good solution as you can't update bootstrap files or you have to propagate this change into the new ones, did it once and it's pain, however it worked for me, as I need this to be called only when user is done with date selection (I'm calling DB and don't want to do it every time you click on minute change)
    – Mara
    Oct 12, 2015 at 11:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.