【问题标题】:Defaulting to start or end of year if only year is entered in angularjs-bootstrap-datepicker如果仅在 angularjs-bootstrap-datepicker 中输入年份,则默认为一年的开始或结束
【发布时间】:2020-01-24 14:11:31
【问题描述】:

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

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

【问题讨论】:

  • 你好,你能分享一下你已经尝试过的代码吗?你使用的是哪个 angularjs-jquery-datetimepicker 版本?
  • 你的意思是angularjs-bootstrap-datetimepicker吗?我正在使用它的最新版本。

标签: angularjs twitter-bootstrap datetimepicker


【解决方案1】:

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

我通过隐藏 datepicker 的原始输入并将一个单独的输入字段与 ng-model 绑定到相同的范围值来解决了我的问题。然后我在它上面附加了一个自己的指令,它为理解我的自定义格式的用户输入实现了一个解析器。 (见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);
        });
      },
    };
  });

【讨论】:

  • 您能提供一个完整的解析器示例吗?最好在沙盒、小提琴或 plunkr 中
  • 抱歉,我手头没有,但是网上应该有很多关于在 AngularJS 中实现自定义表单对象的示例。
【解决方案2】:

我认为你可以使用minDateMaxdate

http://next.plnkr.co/edit/VyWzqYk426is0F1g

首先单击最小日期,以便将日期选择器中的日期解包输入 2020 并按 Enter,然后您可以看到它禁用了日期。

【讨论】:

    猜你喜欢
    • 2013-12-30
    • 2017-07-15
    • 2012-10-19
    • 1970-01-01
    • 1970-01-01
    • 2019-08-02
    • 1970-01-01
    • 2013-02-05
    • 1970-01-01
    相关资源
    最近更新 更多