0
我想为我的日期选择器阻止和格式化输入。 问题是我的阻塞输入指令不适用于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')中的最后一个字符,并再次添加它以获得有效输入。 这是为什么,我能做些什么来修复它?
我在https://angular-ui.github.io/的UI-mask模块中找到了解决方案。 – luk1