angularjs - 如果仅在 angularjs-bootstrap-datepicker 中输入年份，则默认为一年的开始或结束

Question

我正在使用 angularjs-bootstrap-datetimepicker但我不知道如何在手动输入日期而不是使用 UI 时选择输入完整日期。

也就是说，我希望能够仅手动输入“2020”并让它调用一个函数，我可以在其中指定它应该是“2020-01-01, 2020-12-31”还是完全其他的东西。同时还能够使用具有预期用途的 GUI。

Answer 1

我用不同的日期选择器解决了类似的问题，但该解决方案也可能在这里工作。

我通过隐藏 datepicker 的原始输入并将一个单独的输入字段与 ng-model 绑定(bind)到相同的范围值来解决了我的问题。然后我在它上面附加了一个自己的指令，它为理解我的自定义格式的用户输入实现了一个解析器。 (见 ngModel.$parsers):

<input ng-model="my.model" my-parser>
<my-datepicker-directive ng-model="my.model">

该指令是这样实现的。你只需要实现你自己的 myParserFunction()和 myFormattingFunction() (和 myValidationFunction() 如果你想验证输入):

angular.module('app')
  .directive('myParser', function () {
    return {
      require: 'ngModel',
      link: function (scope, element, attrs, ngModelController) {

        /*
         * Display -> Model
         */
        ngModelController.$parsers.push(function (inputValue) {
          if (!myValidationFunction(inputValue)) {
            ngModelController.$setValidity('myParser', false);
            return null;
          }

          ngModelController.$setValidity('myParser', true);
          return myParserFunction(inputValue);
        });

        /*
         * Model -> Display
         */
        ngModelController.$formatters.push(function (modelValue) {
          return myFormattingFunction(modelValue);
        });
      },
    };
  });