Angular components/directives - angularjs

Question

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?

Answer 1

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

Answer 2

Use latest angular material directives as very simple tags
<md-datepicker ng-model="myDate"><md-datepicker>
All demos available here

Answer 3

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>

Answer 4

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!