CODEWITHSUNDEEP
angularjstwitter-bootstrapangular-ui-bootstrap
Ann
Ann

Reputation: 724

Angular components/directives

I'm used to working with JSF/Primefaces. To use a datepicker, I used to write:

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

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

Now I'm trying out Angular with angular-ui (https://angular-ui.github.io/bootstrap/). There is a datepicker directive (http://plnkr.co/edit/?p=preview).

However, from what I see, if I want to use a field with calendar button and popup, I need to manually create input-group with w field and button and some js functions that would handle the button click.

<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;
      };

I find it hard to believe that everyone writes such components on their own (or uses this amount of code every time they need a date input). Are there any predefined directives that would allow me to write one line of code to have a standard datepicker? Where do I find them?

Upvotes: 0

Views: 228

Answers (4)

Ann
Ann

Reputation: 724

Right now I can answer my own question - there is no "standard" library that will make the angular html templates code as concise as I would like it to be.

You need to write this much code - but, in return, you have a great freedom in customising the layout.

Bootstrap and material are great - thank you for all the answers!

Upvotes: 0

Kentonbmax
Kentonbmax

Reputation: 958

From my research and experience with dates and datetime in HTML5 and Angular; the best practice right now for Datetime is to make good use of HTML5 and moment.js. You can bind directly to input directives ng-model. If you just need a date picker, then make use of the angular-ui-datepicker directives. Also Angular Material is awesome. Check it out 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>

Upvotes: 0

Dickens A S
Dickens A S

Reputation: 4054

Use latest angular material directives as very simple tags

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

All demos available here

Upvotes: 0

rob
rob

Reputation: 18523

There are lots out there. You could use Bootstrap UI or AngularStrap.

You could also take a look at some of the date pickers on ngmodules.org

Upvotes: 0

Related Questions