How to access the AngularJS ui-bootstrap datepicker value in my controller

Question

I am using the AngularJS Bootstrap UI library. In my view I have the datepicker directive like so...

<div datepicker ng-model="mt" min-date="minDate" max-date="maxDate" year-range="1" show-weeks="false" ></div>

I've noticed that when I try to reference the value of "mt" in my controller it is always undefined whilst it is correct / updates in the view. For example here is my controller code:

if(something === true) {
  console.log({ people: $scope.guestNumber, resTime: $scope.resTime, ddmmyyyy: $scope.mt }); // $scope.mt is always undefined!!!! 
}

Obviously this must be due to the directive having its own scope.... so my question is, how do I access the value of "mt" in my controller. I was going to use a hidden form input but this feels a little dirty to me (and I am unsure if it will work), like so:

<div datepicker ng-model="mt" min-date="minDate" max-date="maxDate" year-range="1 show-weeks="false" ></div>
<input type="text" ng-model="hiddenDate" value="{{ mt }}">

UPDATE

I have noticed that this bug only seems to happen when my datepicker is in a modal window provided by ui.bootstrap.modal. The service I have for the models looks like so:

factory('modalService', function ($modal) {

        var modal = angular.copy($modal);

        // standard modal for alerts
        modal.reservationMenu = function(message, title) {
            var options = {
                templateUrl: '../../views/modal/model-form.html',
                controller: 'ModalMenuCtrl',
                resolve: {
                    things: function() {
                        return {
                            title: title,
                            message: message
                        };
                    }
                },
                windowClass: 'menu-dia'
            };
            return modal.open(options);
        };

        return modal;
    })

;

If I set the value of the datepicker in my controller, the date is never updated!

Xeon · Accepted Answer · 2014-06-02 12:30:59Z

1

It's because you haven't initialized mt in your scope probably.

ng-model on datepicker is a two-way binding, so when you don't provide value in your controller the value is undefined . When the user chooses a date it'll be set but no earlier.

Look at this example: Plnkr.co

<div data-ng-controller="TestController">
  <div datepicker data-ng-model="mt"  data-year-range="1" data-show-weeks="false" ></div>
  Date: {{mt}} <!-- 'filled' on init -->

  <div datepicker data-ng-model="nt"  data-year-range="1" data-show-weeks="false" ></div>
  Date: {{nt}} <!-- empty on init -->
</div>

var myApp = angular.module('myApp', ['ui.bootstrap']);

myApp.controller('TestController', ['$scope',
    function($scope) {

    $scope.mt = new Date();

    $scope.$watch('mt', function(newValue, oldValue) {
      console.log('mt changed', oldValue, newValue);
    }, true);

    $scope.$watch('nt', function(newValue, oldValue) {
      console.log('nt changed', oldValue, newValue);
    }, true);
  }
]);

UPDATE

Ok. So I think that you have mt in a child scope but you want to get it in parent scope.

You could try doing something like this:

<div datepicker data-ng-model="dateHolder.mt"...

and in controller:

$scope.dateHolder = {mt: new Date()};

edited Jun 2, 2014 at 12:30

answered Jun 2, 2014 at 11:04

Xeon

6,0195 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Sav Over a year ago

The problem is when I set the value in the controller as you suggest the value doesn't seem to update when selected a different date

Xeon Over a year ago

@MikeSav could you post a Plnkr example?

Mike Sav Over a year ago

It must be something to do with my architecture? You see my datepicker is in a modal window (also from the ui-bootstrap)... when I apply the same code to a page the item can be referenced in the controller!

Xeon Over a year ago

@MikeSav updated the answer. It's probably the nested scope issue.

olefrank Over a year ago

Why does this work? The only difference I see is, that now its a property on the scope object. Before the model was $scope.mt Now it's $scope.dateHolder.mt

Collectives™ on Stack Overflow

How to access the AngularJS ui-bootstrap datepicker value in my controller

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related