Directive com AngularJS - Datepicker

2,670 views

Published on

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.

Published in: Education, Technology, Travel
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,670
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
21
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Directive com AngularJS - Datepicker

  1. 1. DatePicker com AngularJS Author: Douglas Lira douglas.lira.web@gmail.com
  2. 2. 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!!
  3. 3. 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 = ''; };
  4. 4. 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

×