2016-03-20 13 views
0

私の日付ピッカーの入力をブロックしてフォーマットしたいと思います。 問題は私のブロッキング入力ディレクティブが他のフィールドで動作しているときに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; 
     }); 
    } 
    }; 
}]); 

とフィルターに付属フォーマットするための第二1、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(); 


    }; 
}); 
0123私のフィルタではこれにより

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

私は8つの文字への入力を制限することができますが、私は、たとえば、8文字の後に何かを追加しようとすると、フォームが有効性を失っている: 私は、有効な1990年11月11日を持って、私は7をクリックしています。7は入力ビット入力の有効性を失ってしまい、入力( '1')の最後の文字を削除してもう一度入力して有効な入力を得る必要があります。 なぜそれを修復することができますか?

+0

UIマスクモジュールのソリューションがhttps://angular-ui.github.io/から見つかりました。 – luk1

答えて

0

私は、angle-ui.github.ioのui-maskモジュールの解を見つけました。

関連する問題