Directive com AngularJS - Datepicker

DatePicker
com
AngularJS
Author: Douglas Lira
douglas.lira.web@gmail.com

1 - A ideia
Criar um datepicker, simples, fácil e que possa ser utilizado sem precisar
identificar o ID que o mesmo atuará. Então criei uma directive =D.
2 – Ferramentas
AngularJS - http://angularjs.org/
Datepicker - http://www.eyecon.ro/bootstrap-datepicker/
3 – Mão na massa!!

1 – index.html
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Datepicker - AngularJS by Douglas Lira</title>
<link href="css/bootstrap.min.css" media="all" rel="stylesheet" type="text/css" />
<link href="css/datepicker.css" media="all" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/angular.min.js"></script>
<script src="controller/MainController.js"></script>
<script src="js/App.js"></script>
</head>
<body ng-controller="MainController">
<input type="text" datepicker name="datestart" ng-model="datestart">
</body>
</html>
2 – MainController.js – controller/MainController.js
function MainController($scope) {
$scope.datestart = '';
};

3 – App.js – js/App.js
$app = angular.module('App',[]);
// 1
$app.directive('datepicker', function() {
return {
restrict: 'A', // 2
require : 'ngModel', // 3
link : function (scope, element, attrs, MainController) {
$(function(){
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
// 4
element.datepicker({
format:'dd/mm/yyyy',
onRender: function(date) {
return date.valueOf() < now.valueOf() ? 'disabled' : '';
}
}).on('changeDate',function(ev){
var newDate = new Date(ev.date);
var newMonth = newDate.getMonth()+1;
var newDay = newDate.getDate()+1;
dateVal = [((newDay < 10) ? "0"+newDay : newDay), ((newMonth < 10) ? "0"+newMonth : newMonth),
newDate.getFullYear()].join('/');
MainController.$setViewValue(dateVal);
scope.$apply();
});
});
}
}
});
Explicando um pouco...
1 – Criei uma directive com o nome “datepicker”
2 – A directive atuará como atributo de um elemento (Neste caso o input)
3 – Qualquer model que estiver atuando no elemento ele será afetado pela directive, ou
seja, ao mudar o valor do input o valor será o mesmo do model
4 – Apenas instanciei o plug-in datepicker
angularjs-br@googlegroups.com
Ajude a compartilhar conhecimento em AngularJS

Directive com AngularJS - Datepicker

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Directive com AngularJS - Datepicker

Semelhante a Directive com AngularJS - Datepicker (20)

Mais de Douglas Lira

Mais de Douglas Lira (6)

Último

Último (20)

Directive com AngularJS - Datepicker