一、引入js
<link href="${basePath}/static/plugin/bootstrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> <script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.min.js" ></script> <script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.fr.js" ></script> <script type="text/javascript" src="${basePath}/static/plugin/bootstrap/js/bootstrap-datetimepicker.zh-CN.js" ></script> <script src="${basePath}/static/plugin/angular/js/angular.min.js"></script>
二、引入HTML
<input size="16" type="text" readonly class="form_datetime" style="width:120px" format-date ng-time ng-model="finishedDtm">
三、创建angularjs指令
formatDate指令做格式转换
ng-time 初始化bootstrap时间控件
注:有时候格式有问题 修改Date的toJSON方法获取本地时间字符串 Date.prototype.toJSON = function () { return this.toLocaleString(); }
bamboo.angularApp = angular.module('task', []) .directive('formatDate', function(){ return { require: 'ngModel', link: function(scope, elem, attr, ngModelCtrl) { ngModelCtrl.$formatters.push(function(modelValue){ if(modelValue) { return modelValue; } }); ngModelCtrl.$parsers.push(function(value){ if(value) { return new Date(value); } }); } }; }).directive('ngTime', function() { return { restrict : 'A', require : '?ngModel', link : function($scope, $element, $attrs, $ngModel) { if (!$ngModel) { return; } $element.datetimepicker({ language: 'zh-CN', weekStart: 1, todayBtn: 1, autoclose: true, todayHighlight: true, startView: 2, format: 'yyyy-mm-dd hh:ii', }); }, }; });
注:整合easyui时自定义操作列的ng-click事件绑定不生效可以使用 $compile($("#gridTable").parent())($scope); 进行重新渲染
{field:'openDetails',title:'展开详情',align:'center',resizable:true,width:'80', formatter:function(value,row,index){ return '<button class="btn btn-sm btn-primary" data-toggle="modal" data-target="#hours_details" ng-click="hoursDetails(\''+row.lId+'\')">工时详情</button>'; } }
angularjs使用了其他前端组件有时候渲染有问题需要使用$timeout进行渲染
function AddHoursController($rootScope,$scope,$timeout,$http){ $scope.initAddHours = function(){ //清理表单数据 $scope.paramList = []; var lId = $("#add_hours [ng-model='laborDetail.lId']").val(); var laborDetail = { "lId":lId } //获取所有项目模块 $.get(contextPath + "/labor/myLabor/hourTask/list.action",laborDetail,function (resp) { var respData = resp.result; for (var i = 0; i < respData.length; i++) { respData[i].isNotEditable = true; } $timeout(function() { //生成历史工时数据 $scope.laborDetails = respData; }); }); } };