Angularjs与bootstrap.datetimepicker结合实现日期选择器
http://www.lovelucy.info/angularjs-best-practices.html
http://damoqiongqiu.iteye.com/blog/1917971
http://www.itnose.net/detail/6144038.html
https://github.com/shyamseshadri/angularjs-book
2015-10-23
研究几日后,找到答案:
<!DOCTYPE html> <html lang="en" ng-app="ProductList"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta charset="utf-8" /> <title>Angularjs与bootstrap.datetimepicker结合实现日期选择器</title> <link rel="stylesheet" href="../../assets/css/bootstrap.css" /> <link rel="stylesheet" href="../../assets/css/bootstrap-timepicker.css" type="text/css"></link> </head> <body ng-controller="productListController"> <div class="widget-box" ng-repeat="edu in edus | filter:q as results"> <div class="form-group"> <input class="input-medium date-picker" datepicker readonly id="id-date-picker-1" type="text" data-date-format="yyyy-mm-dd" placeholder="" ng-model="edu.begindate" /> </div> <button ng-click="saveEducation(edu);" >保存 </button> <hr/> </div> <script src="../../assets/js/jquery.js"><!--basic样式--> <script src="../../assets/js/bootstrap.js"></script><!--basic样式--> <script src="../../assets/js/date-time/bootstrap-datepicker.js"></script><!-- 日期选择器必须 --> <script src="../../frameworks/angular.min.js"></script> <script> var productListApp = angular.module('ProductList', []); /*自定义指令datepicker,用于员工背景——教育经历、工作经历、家庭关系中日期数据修改时的双向绑定*/ productListApp.directive('datepicker', function() { return { restrict: 'A', require: '?ngModel', // This method needs to be defined and passed in from the // passed in to the directive from the view controller scope: { select: '&' // Bind the select function we refer to the right scope }, link: function(scope, element, attrs, ngModel) { if (!ngModel) return; var optionsObj = {}; console.log("directive~~~~~"+JSON.stringify( ngModel)); var updateModel = function(dateTxt) { scope.$apply(function () { // Call the internal AngularJS helper to // update the two way binding ngModel.$setViewValue(dateTxt); }); console.log("after ngModel~~~~~"+JSON.stringify( ngModel)); }; optionsObj.onSelect = function(dateTxt, picker) { updateModel(dateTxt); if (scope.select) { scope.$apply(function() { scope.select({date: dateTxt}); }); } }; ngModel.$render = function() { // Use the AngularJS internal 'binding-specific' variable element.datepicker('setDate', ngModel.$viewValue || ''); }; element.datepicker(optionsObj); } }; }); productListApp.controller('productListController', function($scope, $http) { var id= 928; //查看员工背景资料 /*$http({ method : 'POST', url : '/omss/viewEmpBackgroudById?id='+id }).success(function(data, status, headers, config) { $scope.status = status; if (data.length != 0) { $scope.employeeBg = (data[0]); console.log("员工背景data:"+JSON.stringify(data)) //循环多个工作经历 $scope.edus=(data[0]).eduList; } }).error(function(data, status, headers, config) { $scope.data = data || "Request failed"; $scope.status = status; $scope.tips = '对不起,您的网络情况不太稳定。'; });*/ $scope.edus=[ { "badge": "", "begindate": "2015-10-02", "edutype": "3", "enddate": "2015-10-15", "id": "9023", "major": "电子商务", "schoolname": "广大", "sid": "22F92C8D81144CDFE050007F01006C3D", "studytype": "" }, { "badge": "", "begindate": "2015-10-01", "edutype": "3", "enddate": "2015-10-10", "id": "9023", "major": "机械自动化", "schoolname": "北大", "sid": "23267E58D5F902D7E050007F01002EF9", "studytype": "" } ]; $scope.saveEducation = function(edu) { console.log("edu.begindate........."+edu.begindate); } }); </script> </body> </html>