Angular UI Bootstrap DatePicker - get selected date on close / blur

Question

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>

score 34 · Answer 1 · answered Jun 22 '14 at 21:44

34

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

answered Jun 22 '14 at 21:44

Holland Risley

6,969
9
25
34

This achieved the desired results for us. Thank you for this. :) – Steven Rogers May 02 '16 at 19:22

score 8 · Answer 2 · answered Apr 22 '16 at 09:29

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

score 3 · Answer 3 · answered Nov 18 '14 at 21:30

3

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

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

answered Nov 18 '14 at 21:30

alexoviedo999

6,761
1
26
17

score 0 · Answer 4 · answered Aug 21 '14 at 18:07

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.

answered Aug 21 '14 at 18:07

Mara

118
1
10

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 '15 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 07 '15 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 '15 at 11:22

Angular UI Bootstrap DatePicker - get selected date on close / blur

4 Answers4