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.js及bootstrap
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'
}
});
效果如下：
datetimepicker详细设置可参考：http://www.bootcss.com/p/bootstrap-datetimepicker/
或
https://blog.csdn.net/hizzyzzh/article/details/51212867#313-language-语言
若有需要可以在我的下载中下载完整项目angular-datetimepicker