使用angularjs封裝bootstrap datetimepicker選擇日期時間

// 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 />
相關文章
相關標籤/搜索