從角度引導限制datepicker的輸入

Question

我想爲我的日期選擇器阻止和格式化輸入。 問題是我的阻塞輸入指令不適用於datepicker，當它工作的其他領域。 這是我的日期選擇器代碼：

 <p class="input-group"> 
     <input type="text" id="medicalExaminationDate" 
       name="medicalExaminationDate" class="form-control" datepicker-localdate date-input 
       uib-datepicker-popup="{{user.format}}" 
       ng-model="user.parent.data3" is-open="user.popup3.opened" 
       datepicker-options="user.dateOptions" ng-required="true" 
       close-text="Zamknij" 
       clear-text="Wyczyść" 
       current-text="Dzisiaj" 

       required 
       placeholder="data"/> 

     <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" 
       ng-click="user.open3()"> 
      <i class="glyphicon glyphicon-calendar"></i> 
     </button> 
     </span> 
     </p> 

並在控制器：

//datepicker 
    vm.parent = {data1: '',data2:'', data3:''}; 
    vm.formats = ['yyyy-MM-dd']; 
    vm.format = vm.formats[0]; 
    //vm.altInputFormats = ['M!/d!/yyyy']; 
    vm.popup1 = { 
    opened: false 
    }; 
    vm.popup2 = { 
    opened: false 
    }; 
vm.popup3 = { 
    opened: false 
}; 
vm.dateOptions = { 
    dateDisabled: disabled, 
    formatYear: 'yyyy', 
    maxDate: new Date(2050, 12, 31), 
    minDate: new Date(1950,1,1), 
    startingDay: 1 
}; 
    vm.setDate = setDate; 
    function setDate(year, month, day) { 
    vm.dt = new Date(year, month, day); 
} 
vm.open1 = open1; 
vm.open2 = open2; 
vm.open3 = open3; 


function open1() { 
    vm.popup1.opened = true; 
} 
function open2() { 
    vm.popup2.opened = true; 
} 
function open3() { 
    vm.popup3.opened = true; 
} 
// Disable weekend selection 
function disabled(data) { 
    var date = data.date, 
    mode = data.mode; 
    return mode === 'day' && (date.getDay() === 0 || date.getDay() === 6); 
} 

現在，我想要做的是阻止輸入後8個字符，其格式爲「XXXX-XXXX」。 我用來阻止其他字段中的輸入的指令，這對datepicker根本不起作用（我可以添加儘可能多的字符來輸入，因爲它不會阻止它，當它在正常輸入字段中工作的很好時）：

.directive('myMaxlength', ['$compile', '$log', function($compile, $log) { 
    return { 
    restrict: 'A', 
    require: 'ngModel', 
    link: function (scope, elem, attrs, ctrl) { 
     attrs.$set("ngTrim", "false"); 
     var maxlength = parseInt(attrs.myMaxlength, 10); 
     ctrl.$parsers.push(function (value) { 
     $log.info("In parser function value = [" + value + "]."); 
     if (value.length > maxlength) 
     { 
      $log.info("The value [" + value + "] is too long!"); 
      value = value.substr(0, maxlength); 
      ctrl.$setViewValue(value); 
      ctrl.$render(); 
      $log.info("The value is now truncated as [" + value + "]."); 
     } 
     return value; 
     }); 
    } 
    }; 
}]); 

，第二個用於過濾器在格式化包括，taht是somewaht工作，但不是因爲我希望它（以下過濾器的代碼，我添加了什麼是錯的）：

.directive('dateInput', function($filter, $browser) { 
    return { 
    require: 'ngModel', 
    link: function ($scope, $element, $attrs, ngModelCtrl) { 
     var listener = function() { 
     var value = $element.val().replace(/[^0-9]/g, ''); 
     $element.val($filter('dateFormat')(value, false)); 

     }; 


     // This runs when the model gets updated on the scope directly and keeps our view in sync 
     ngModelCtrl.$render = function() { 
     $element.val($filter('dateFormat')(ngModelCtrl.$viewValue, false)); 
     }; 

     $element.bind('change', listener); 
     $element.bind('keydown', function (event) { 
     var key = event.keyCode; 
     // If the keys include the CTRL, SHIFT, ALT, or META keys, or the arrow keys, do nothing. 
     // This lets us support copy and paste too 
     if (key == 91 || (15 < key && key < 19) || (37 <= key && key <= 40)) { 
      return; 
     } 
     $browser.defer(listener); // Have to do this or changes don't get picked up properly 

     }); 

     $element.bind('paste cut', function() { 
     $browser.defer(listener); 
     }); 
    } 

    } 
}) 

帶過濾器：

.filter('dateFormat', function() { 
    return function (dateFormat) { 
    console.log(dateFormat); 
    if (!dateFormat) { return ''; } 

    var value = dateFormat.toString().trim().replace(/^\+/, ''); 
    //value= value.replace(/[^0-9]/g, '').slice(0,8); 
    if (value.match(/[^0-9]/)) { 
     return dateFormat; 
    } 


    var year, month, day; 

    switch (value.length) { 
     case 1: 
     case 2: 
     case 3: 
     year = value; 
     break; 

     default: 
     year = value.slice(0, 4); 
     month = value.slice(4, 6); 
     day = value.slice(6, 10); 
    } 

    return (year + "-" + month + "-" + day).trim(); 


    }; 
}); 

有了這個在我的過濾器：

//value= value.replace(/[^0-9]/g, '').slice(0,8); 

我可以限制輸入8個字符，但形式是失去效力，如果我嘗試8字符後添加一些東西，例如： 我有有效的1990年11月11日，然後我點擊7. 7沒有添加到輸入位輸入丟失有效性，我需要刪除輸入（'1'）中的最後一個字符，並再次添加它以獲得有效輸入。 這是爲什麼，我能做些什麼來修復它？

Answer 1

我在angular-ui.github.io的ui-mask模塊中找到了一個解決方案。