使用angularjs封装bootstrap datetimepicker选择日期时间

2019独角兽企业重金招聘Python工程师标准>>>

// 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 />

转载于:https://my.oschina.net/u/2489258/blog/3006830