Question

我习惯使用JSF / Primefaces。要使用datepicker，我曾写过：

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

（http://www.primefaces.org/showcase/ui/input/calendar.xhtml）

现在我用angular-ui（https://angular-ui.github.io/bootstrap/）尝试Angular。有一个datepicker指令（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;
      };

我发现很难相信每个人都自己编写这些组件（或者每次需要日期输入时都使用这些代码）。是否有任何预定义的指令允许我编写一行代码以获得标准的datepicker？我在哪里找到它们？

Answer 1

那里有很多。您可以使用Bootstrap UI或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

使用最新的角度材质指令作为非常简单的标记

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

所有可用的演示here

Answer 4

现在我可以回答我自己的问题 - 没有“标准”库可以使角度html模板代码尽可能简洁。

您需要编写这么多代码 - 但作为回报，您可以自由地自定义布局。

Bootstrap和材料很棒 - 谢谢你的所有答案！

角度组件/指令

4 个答案: