一、引入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;});});}};

?

轉載于:https://www.cnblogs.com/tianzhongshan/p/6957853.html

總結

以上是生活随笔為你收集整理的angularjs 整合bootstrap 时间控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。