AngularJS结合dateTimePicker的使用-指令

项目使用AngularJS,要选择时间控件,经过对比决定使用dateTimePicker。
原本dateTimePicker支持jQuery,现通过AngularJS的指令对其进行模块化,减少每次引用书写相同代码,提高开发效率。
html页面


<html ng-app="myApp" ng-controller="myCtrl">
  <head>
  head>
  <body>
	<input class="form-control"  
	       date-time-picker format="yyyy-mm-dd hh:ii" 
	       type="text" id="beginTime" 
	       ng-model="vo.beginDate" 
	       end-date="{{vo.endDate}}">
	<span class="input-group-addon">span>
	<input class="form-control" 
	       date-time-picker 
	       format="yyyy-mm-dd hh:ii" 
	       type="text" id="endTime" 
	       show-level="1" 
	       ng-model="vo.endDate" 
	       begin-date="{{vo.beginDate}}"> 
	body>
html>   

AngularJs模块,放入单独的angular-datetimepicker.js文件中

(function () {
	'use strict';
	var dateTimePicker = angular.module("dateTimePicker",[]);
	/**
	 * 选择时间-精确到时分秒
	 */
	dateTimePicker.directive("dateTimePicker",['$timeout',function($timeout){
		return{
			require:'?ngModel',
			restrict:'AE',
			scope:{
				ngModel:'=',
				beginDate:'@',
				endDate:'@',
                minView:'@',// 最精确的时间  0-4越小越精确  0-分钟; 1-小时; 2-天; 3-月 ; 4-年
                maxView : '@',//最高能展示的时间,默认为年
                startView:'@', //— 选完时间首先显示的视图 0:分钟;1:小时;2:天:3:月;4:年
                format:'@',//默认显示月视图,不显示时分秒
                todayBtn:'@',//今天按钮是否显示, 默认显示
                todayHighlight:'@',//当天显示是否高亮,默认显示
                showMeridian:'@',//是否显示上下午,默认不显示
                weekStart:'@',// 一周从哪一天开始显示,默认为7,表示从周日开始显示
                daysOfWeekDisabled:'@', //一周的周几不能选择[0,4,6]
                forceParse:'@',//强制解析,输入的可能不正规,但是它胡强制尽量解析成你规定的格式(format) 默认解析
                autoclose:'@'//选完时间后是否自动关闭 ,默认true,表示关闭
			},
			link:function(scope,element,attr,ngModel){
				$timeout(function(){
					element.datetimepicker({
						showMeridian:scope.showMeridian ? scope.showMeridian : false,
						todayBtn: scope.todayBtn ? scope.todayBtn : true,
						todayHighlight: scope.todayHighlight ? scope.todayHighlight : true,
						weekStart: scope.weekStart ? scope.weekStart : 0,
					    daysOfWeekDisabled: scope.daysOfWeekDisabled ? scope.daysOfWeekDisabled :[],
					    forceParse:scope.forceParse ? scope.forceParse : true,
					    autoclose:scope.autoclose ? scope.autoclose : true, //
				        minView : scope.minView ? scope.minView : 2,
				        maxView : scope.maxView ? scope.maxView : 4,
					    startView:scope.startView ?scope.startView : 2,
					    format: scope.format ? scope.format : 'yyyy-mm-dd',
					    		
			    		inline:true,
			    		language: 'zh-CN',
			    		keyboardNavigation:true,//方向键改变日期
			    		/*onSelect: function(dateText) {
			    			console.log(dateText)
			    			var modelPath = $(this).attr('ng-model');
			    			putObject(modelPath, scope, dateText);
			    			scope.$apply();
			    		},*/
				    }).on('click',function(){//设置最大最小时间限制
				    	if(attr.hasOwnProperty('beginDate')){
				    		element.datetimepicker('setStartDate', attr.beginDate);
				    	}
				    	if(attr.hasOwnProperty('endDate')){
				    		element.datetimepicker('setEndDate', attr.endDate);
				    	}
				    });
				},0)
			}
		}
	}]);
}()) 

使用定义好的Angular模块,html中首先要引入angular-datetimepicker.js angular.jsbootstrap

 var app = angular.module("myApp", ['dateTimePicker']);
 app.controller("myCtrl", function($scope, $interval, $http) {
    $scope.vo={
      beginDate:'2018-01-02 01:20',
      endDate:'2018-01-03 02:20'
    }      
  });

效果如下:
AngularJS结合dateTimePicker的使用-指令_第1张图片
datetimepicker详细设置可参考:http://www.bootcss.com/p/bootstrap-datetimepicker/

https://blog.csdn.net/hizzyzzh/article/details/51212867#313-language-语言
若有需要可以在我的下载中下载完整项目angular-datetimepicker

你可能感兴趣的