我的目标是创建一个也具有输入掩码的UI Bootstrap日期选择器。
datepicker指令仅验证在弹出窗口中选择的日期,而不验证用户手动输入的日期,因此我在how to add custom validation中查找了文本输入。

我有所有的working in this Plunk

这是重要的位:

<!-- HTML -->
<span>Errors: {{myForm.myDate.$error}}</span>
<input
    name="myDate"
    type="text"
    class="form-control"
    ng-class="{error: myForm.myDate.$invalid && myForm.myDate.$dirty}"
    datepicker-popup="MM/dd/yyyy"
    ng-model="dt"
    is-open="opened"
    min-date="'09/01/2015'"
    max-date="'11/11/2015'"
    ng-required="true"
    show-weeks="false"
    show-button-bar="false" />


// JavaScript
.controller('DatepickerDemoCtrl', function ($scope) {
  $scope.dt = undefined;

  $scope.open = function($event) {
    $scope.opened = !$scope.opened;
  };

  $scope.today = new Date();
})

.config(function($provide) {
  $provide.decorator('datepickerPopupDirective', function($delegate) {
    var directive = $delegate[0];
    var link = directive.link;

    directive.compile = function() {
      return function(scope, iEl, iAttrs, ctrls) {
        link.apply(this, arguments);

        // use custom validator to enforce date range on hand-entered text
        ctrls[0].$validators.inDateRange = function(modelValue, viewValue) {
          console.log(modelValue, viewValue);

          // use the ranges provided in the attributes for the validation
          var enteredDate = new Date(viewValue)
          ,   min = new Date(iAttrs.minDate)
          ,   max = new Date(iAttrs.maxDate);

          return ctrls[0].$isEmpty(modelValue)
                 || (min <= enteredDate && enteredDate <= max);
        };

        // apply input mask to the text field
        iEl.mask('99/99/9999');
      };
    };

    return $delegate;
  });
});

现在,我想做一些简单的事情,即在输入中添加一个getterSetter,以便在将值持久保存到模型之前可以对其进行一些处理。

我在元素上更改了ng-model,添加了ng-model-options以引用我的getterSetter,并添加了实际的getterSetter方法。
<!-- HTML -->
ng-model="getSetDate"
ng-model-options="{getterSetter: true}"

// JavaScript
$scope.getSetDate = function(val) {
  if(angular.isDefined(val)) {
    $scope.dt = val;
  } else {
    return val;
  }
};

但是,即使实际上基本上没有执行任何操作的this simple Plunk with getterSetter也会引入错误。如果我:
  • 输入无效的日期,例如09/10/2011
  • 将其更正为有效的一天(通过键入),例如09/10/2015
  • 该值消失

  • 我不知道为什么这个简单的getterSetter的引入会导致我的值(value)丢失。我是否应该以其他方式实现此操作?

    最佳答案

    看起来包括日期选择器中尚未真正支持包括getterSetter选项在内的ng-model-options,但是它们是他们希望实现的。

    https://github.com/angular-ui/bootstrap/issues/4837

    编辑:
    另外,我创建了一个plunk通过观看来更新辅助模型。我不确定这是否正是您要寻找的东西,但似乎做了与您通过getterSetter尝试的类似的事情。实质上,以下内容已添加到您的工作示例中。

      $scope.dt = undefined;
      $scope.newdt = undefined;
    
      $scope.$watch('dt', function(){
        if ($scope.dt)
          $scope.newdt = $scope.dt;
      });
    

    09-16 08:21