AngularJS - Simple Directive Use
HTML
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<script src="http://www.eyecon.ro/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/bootstrap.css">
<link rel="stylesheet" href="http://www.eyecon.ro/bootstrap-datepicker/css/datepicker.css">
<div ng-app="myApp" ng-controller="Ctrl">
<br>
Date 1
<input type="text" datepicker1={{pickeropts}} ng-model="date1" /> {{date1 | date:MM/dd/yyyy}}
<br>
Date 2
<input type="text" datepicker2={{pickeropts}} ng-model="date2" /> {{date2 | date:MM/dd/yyyy}}
<br>
Date 3
<input type="text" datepicker1 data-date-format="{{format}}" ng-model="date3" /> {{date3 | date:MM/dd/yyyy}}
</div>
CSS
.pick {
background-color: yellow;
}
JavaScript
angular.module('myApp', [])
.controller('Ctrl', ['$scope', function($scope) {
$scope.date1 = new Date("01/15/1975");
$scope.date2 = new Date("01/15/1985");
$scope.date3 = new Date("01/15/1995");
$scope.format = "dd-mm-yyyy";
$scope.pickeropts = { 'format' : "dd-mm-yyyy" };
}])
.directive('datepicker1', function(){
return {
require: '?ngModel',
link: function($scope, element, attrs, controller) {
var originalRender;
var updateModel = function(ev) {
return $scope.$apply(function() {
return controller.$setViewValue(ev.date);
});
};
if (controller != null) {
originalRender = controller.$render;
controller.$render = function() {
originalRender();
return element.datepicker.ddate = controller.$viewValue;
};
}
return attrs.$observe('datepicker1', function(value) {
var options;
options = {};
if (angular.isObject(value)) {
options = value;
}
if (typeof(value) === "string" && value.length > 0) {
options = angular.fromJson(value);
}
return element.datepicker(options).on('changeDate', updateModel);
});
}
};
})
.directive('datepicker2', function(){
return {
require: '?ngModel',
link: function($scope, element, attrs, controller) {
var updateModel = function(ev) {
return $scope.$apply(function() {
return controller.$setViewValue(ev.date);
});
};
if (controller !== null)...