业务背景:
初学AngularJs,最近一段时间,因业务需求,要求日期选择带有快捷键、时分秒等。鉴于AngularJS组件库ui-bootstrap没有此功能,找了一款基于原生JS实现的插件-jeDate,总体效果还可以
基本封装使用:
1 xxx.directive('jeDatepicker', function ($compile, $timeout) { 2 return{ 3 restrict: 'A', 4 require: 'ngModel',//依赖的指令 5 scope: { 6 'ngModel': '=' //=双向数据绑定,@单向数据绑定, &调用父作用域的函数 7 }, 8 link: function ($scope, $element, $attr) { 9 /** 10 * exp: 11 * <input type="text" id="test" class="form-control" ng-model="test" je-datepicker> 12 */ 13 var id = $attr.id; 14 var options = { 15 id: '#' + id 16 }; 17 options.minDate = $attr.mindate ? $attr.mindate : '1900-01-01 00:00:00'; 18 options.maxDate = $attr.maxdate ? $attr.maxdate : '2099-12-31 23:59:59'; 19 options.format = $attr.format ? $attr.format : 'YYYY-MM-DD hh:mm:ss'; 20 options.shortcut = [ 21 {name:"一周",val:{DD:7}}, 22 {name:"一个月",val:{DD:30}}, 23 {name:"二个月",val:{MM:2}}, 24 {name:"三个月",val:{MM:3}}, 25 {name:"一年",val:{DD:365}} 26 ]; 27 options.donefun = function (obj) {//选中日期的回调 28 $scope.$apply(function () { 29 $scope.ngModel = obj.val; 30 }) 31 }; 32 options.clearfun = function() {//清除日期后的回调 33 $scope.$apply(function () { 34 $scope.ngModel = ''; 35 }) 36 }; 37 $timeout(function () { 38 jeDate(options.id, options); 39 }, 1); 40 } 41 } 42 })