Angular components/directives

Question

我习惯与 JSF/Primefaces 一起工作。要使用日期选择器，我曾经这样写：

    <p:calendar id="button" value="#{calendarView.date3}" showOn="button" />

(http://www.primefaces.org/showcase/ui/input/calendar.xhtml)

现在我正在尝试 Angular 和 angular-ui (https://angular-ui.github.io/bootstrap/). There is a datepicker directive (http://plnkr.co/edit/?p=preview)。

但是，据我所知，如果我想使用带有日历按钮和弹出窗口的字段，我需要手动创建带有 w 字段和按钮的输入组以及一些可以处理按钮点击的 js 函数。

<div class="row">
    <div class="col-md-6">
        <p class="input-group">
          <input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
          <span class="input-group-btn">
            <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
          </span>
        </p>
    </div>
        <div class="col-md-6">
            <p class="input-group">
              <input type="date" class="form-control" datepicker-popup ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
              <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
              </span>
            </p>
        </div>
    </div>

      $scope.open = function($event) {
          $event.preventDefault();
          $event.stopPropagation();
          $scope.opened = true;
      };

我很难相信每个人都自己编写这样的组件（或者每次需要输入日期时都使用这么多代码）。是否有任何预定义的指令可以让我编写一行代码来拥有标准的日期选择器？我在哪里可以找到它们？

Answer 1

那里有很多。你可以使用 Bootstrap UI or AngularStrap.

您还可以查看 ngmodules.org

上的一些日期选择器

Answer 2

根据我在 HTML5 和 Angular 中对日期和日期时间的研究和经验；现在 Datetime 的最佳实践是充分利用 HTML5 和 moment.js。您可以直接绑定到输入指令 ng-model。如果你只需要一个日期选择器，那么使用 angular-ui-datepicker 指令。 Angular Material 也很棒。看看here

<div class="col-sm-4">
        <label for="fltrStartDate"> Start Date: </label>
        <input id="fltrStartDate" type="datetime-local" ng-model="$ctrl.startDate">
    </div>
    <div class="col-sm-4">
        <label for="fltrEndDate"> Ends Date: </label>
        <input id="fltrEndDate" type="datetime-local" ng-model="$ctrl.endDate">
    </div>

Answer 3

使用最新的 angular material 指令作为非常简单的标签

<md-datepicker ng-model="myDate"><md-datepicker>

所有演示可用here

Answer 4

现在我可以回答我自己的问题 - 没有 "standard" 库可以使 angular html 模板代码像我希望的那样简洁。

您需要编写这么多代码 - 但是，在 return 中，您可以非常自由地自定义布局。

Bootstrap 和 material 很棒 - 感谢您的所有回答！

Angular components/directives

Angular components/directives

twitter-bootstrap

angularjs

angular-ui-bootstrap