AngularJS之jeDate日期控制項基本使用

業務背景：

　　初學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 })