// 1.引入相關的JS和css // 2.封裝指令 /** * http://www.bootcss.com/p/bootstrap-datetimepicker/ * 時間日期組件 * minView: 2, 設置只能選日期 * format: 格式化日期-> yyyy-mm-dd yyyy-mm-dd hh:ii yyyy-mm-dd hh:ii:ss * initialDate: 初始化日期 */ utilModule.directive("gDatetimepicker", function($timeout) { return { restrict: 'EA', scope: { gFormat: "@", gOpenTime: "@" }, link: function($scope,element,attrs) { if (angular.isUndefined($scope.gOpenTime)) { $scope.gOpenTime = 'true'; } // 沒有開啓時間,而且沒有輸入格式化 if ($scope.gOpenTime == 'false' && angular.isUndefined($scope.gFormat)) { $scope.gFormat = "yyyy-mm-dd"; } if (angular.isUndefined($scope.gFormat)) { $scope.gFormat = "yyyy-mm-dd hh:ii"; } $timeout(function(){ $(element).datetimepicker({ language: datetimePickerI18N, // datetimePickerI18N在jspHeader.jsp定義的 weekStart: 1, todayBtn: 1, autoclose: 1, todayHighlight: 1, startView: 2, forceParse: 0, showMeridian: 1, minView: $scope.gOpenTime == 'false' ? 2 : 0, autoclose: 1, format: $scope.gFormat }); },500); } } }); //3.在頁面中使用 <!-- 不開啓選擇時間 --> <input type="text" g-datetimepicker g-open-time="false" /> <!-- 開啓 --> <input type="text" g-datetimepicker />