AngularJS datepicker custom directive formatter not displaying date

Question

I have two custom datepicker directives. One is called startDatePicker directive and the second is endDatePicker. I'm passing model from one to another which is fine, however when I pass date as string it does not display the date. I know it shouldn't because datepicker expects date object and it cannot convert it to date object automatically. Because my backend server returns dates as strings I need to convert to date objects. For that I use model.$formatter in my directive to convert string to date object and then send it to the view so the date can be selected and displayed. The date is getting selected, but it's not getting displayed.. To simulate the issue I have defined two variables in my controller. These two will be used for datepicker models as well. The first variable gets selected and displayed in the datepicker, but second only gets selected, but not displayed. What I'm doing wrong?

 $scope.startDate = moment.utc("2016/12/25 00:00:00")._d;
 $scope.endDate = "2016/12/25 00:00:00";

I have setup plunker to show the issue http://plnkr.co/edit/trEkwuO06VMJ1HdCkl5w?p=preview

Complete directive below

 angular.module('ui.bootstrap.demo').directive('endDatepicker', function() {
 return {
  restrict: 'A',
  scope: {
      ngModel: "=",
      minStartDate: "=",
  },
  require: 'ngModel',
  replace: true,
  templateUrl: 'datepicker-template.html',
  link: function(scope, element, attrs, ngModel) {

  ngModel.$formatters.push(function getJsonDate(date) {
            if (!date) return null;
            console.log("Unformatted date " + date)
            var newDate = moment.utc(date)._d;
            console.log("Formatter fired " + newDate)
            return newDate    
        });

      scope.popupOpen = false;
      scope.openPopup = function($event) {
          $event.preventDefault();
          $event.stopPropagation();
          scope.popupOpen = true;
      };
      console.log(scope.endDate);
      scope.$watch('minStartDate', function(newValue,oldValue){
        if (newValue) {
          console.log(newValue)
          scope.dateOptions.minDate = newValue;
        }
      })

      scope.dateOptions = {
        startingDay: 1,
        minDate: moment.utc()._d
      }
      scope.open = function($event) {
        $event.preventDefault();
        $event.stopPropagation();
        scope.opened = true;
      };

  }
};

});

tasseKATT · Accepted Answer · 2016-12-21 18:47:53Z

1

This can be a confusing issue.

Right there will be two ngModel controllers associated with the endDatepicker directive.

One for ng-model here:

<div end-datepicker ng-model="endDate" min-start-date="startDate"></div>

And one for ng-model in the template:

<input type="text" class="form-control" ... ng-model="ngModel" ...

Both controllers will work with the same model, but you need to add the formatter to the correct one.

When you require the controller in your directive you will get the ngModel controller for the first one, but you need the controller for the ngModel on the input where the formatted value is to be shown.

Instead of requiring the controller the following should work:

link: function(scope, element, attrs, ngModel) {

  var inputModelController = element.find('input').controller('ngModel');

  inputModelController.$formatters.push(function getJsonDate(date) {
    // Code
  });

answered Dec 21, 2016 at 18:47

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

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

1 Comment

MrPZzZ Over a year ago

Yes that has worked right away... I didn't realize that both controllers will work with the same model which is why I was going circles to no avail... Thanks for pointing this out it's very valuable experience for beginner angular developer.. Marking as accepted. Merry Christmas

Collectives™ on Stack Overflow

AngularJS datepicker custom directive formatter not displaying date

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related