300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > Angularjs与bootstrap.datetimepicker结合实现日期选择器

Angularjs与bootstrap.datetimepicker结合实现日期选择器

时间:2020-05-09 10:56:20

相关推荐

Angularjs与bootstrap.datetimepicker结合实现日期选择器

http://www.lovelucy.info/angularjs-best-practices.html

/blog/1917971

/detail/6144038.html

/shyamseshadri/angularjs-book

-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><bodyng-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"datepickerreadonlyid="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' variableelement.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": "-10-02","edutype": "3","enddate": "-10-15","id": "9023","major": "电子商务","schoolname": "广大","sid": "22F92C8D81144CDFE050007F01006C3D","studytype": ""},{"badge": "","begindate": "-10-01","edutype": "3","enddate": "-10-10","id": "9023","major": "机械自动化","schoolname": "北大","sid": "23267E58D5F902D7E050007F01002EF9","studytype": ""}];$scope.saveEducation = function(edu) {console.log("edu.begindate........."+edu.begindate);}});</script></body></html>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。