Предельный ввод в datepicker от углового бутстрапа

Question

Я хотел бы заблокировать и форматировать ввод для моего datepicker. Проблема заключается в том, что моя директива ввода блокировки не работает для datepicker, когда она работает для других полей. Это мой код 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

Я нашел решение в модуле ui-mask от angular-ui.github.io.