Question

我有两个自定义datepicker指令。一个叫做startDatePicker指令，第二个叫做endDatePicker。我将模型从一个传递给另一个很好，但是当我将日期作为字符串传递时它不会显示日期。我知道它不应该因为datepicker需要date对象而且它不能自动将它转换为date对象。因为我的后端服务器将日期作为字符串返回，我需要转换为日期对象。为此我在我的指令中使用model。$ formatter将字符串转换为日期对象，然后将其发送到视图，以便可以选择和显示日期。日期已被选中，但未显示... 为了模拟这个问题，我在控制器中定义了两个变量。这两个也将用于datepicker模型。第一个变量被选中并显示在日期选择器中，但第二个变量仅被选中，但未显示。我做错了什么？

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

我已设置plunker来显示问题http://plnkr.co/edit/trEkwuO06VMJ1HdCkl5w?p=preview

下面的完整指令

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

  }
};

});

Answer 1

这可能是一个令人困惑的问题。

右边会有两个与endDatepicker指令关联的ngModel控制器。

此处ng-model一个：

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

模板中ng-model的一个：

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

两个控制器都可以使用相同的模型，但您需要将格式化程序添加到正确的控制器中。

当您需要指令中的控制器时，您将获得第一个控制器的ngModel控制器，但您需要输入的ngModel控制器，其中将显示格式化的值。

而不是要求控制器，以下应该起作用：

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

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

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

AngularJS datepicker自定义指令格式化程序未显示日期

1 个答案: