In this post we will see how to setup a
Datepicker popup with angular directives for bootstrap.
1) AngularJS (requires AngularJS 1.4.x or higher)
2) Bootstrap CSS
3) Angular-animate
...
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
.....
The datepicker popup is meant to be used with an
input element.For detailed documentation of uib-datepicker-popup please
refer the link . As shown in the below code snippet the
attribute uib-datepicker-popup is used to configure the date format . The
rest of the configuration is to bind the input element and the calendar icon
and enable open and close actions for the popup.
...
<input type="text" class="form-control" uib-datepicker-popup="{{dateFormat}}"
ng-model="form.dob" datepicker-options="dateOptions" ng-required="true"
is-open="popupDob.opened" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="openDob()">
<i class="glyphicon glyphicon-calendar"></i></button>
</span>
...
....
$scope.popupDob = {
opened: false
};
$scope.dateFormat = 'dd-MMM-yyyy'
$scope.openDob = function() {
$scope.popupDob.opened = true;
};
.....
Here is the demo .
No comments :
Post a Comment