Osk*_*son 6 datetimepicker twitter-bootstrap angularjs
我正在使用angularjs-bootstrap-datetimepicker,但我不知道如何在手动输入日期而不是使用 UI 时选择输入完整日期。
也就是说,我希望能够仅手动输入“2020”并让它调用一个函数,我可以在其中指定它是“2020-01-01、2020-12-31”还是其他完全不同的东西。同时还能够按照预期用途使用 GUI。
我使用不同的日期选择器解决了类似的问题,但该解决方案也可以在这里工作。
我通过隐藏日期选择器的原始输入并将一个单独的输入字段与 ng-model 绑定放置到相同的范围值来解决我的问题。然后我在它上面附加了一个自己的指令,它为理解我的自定义格式的用户输入实现了一个解析器。(见ngModel.$parsers):
<input ng-model="my.model" my-parser>
<my-datepicker-directive ng-model="my.model">
Run Code Online (Sandbox Code Playgroud)
该指令是这样实现的。你只需要实现你自己的 myParserFunction()和myFormattingFunction()(myValidationFunction()如果你想验证输入):
angular.module('app')
.directive('myParser', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, ngModelController) {
/*
* Display -> Model
*/
ngModelController.$parsers.push(function (inputValue) {
if (!myValidationFunction(inputValue)) {
ngModelController.$setValidity('myParser', false);
return null;
}
ngModelController.$setValidity('myParser', true);
return myParserFunction(inputValue);
});
/*
* Model -> Display
*/
ngModelController.$formatters.push(function (modelValue) {
return myFormattingFunction(modelValue);
});
},
};
});
Run Code Online (Sandbox Code Playgroud)
我认为你可以使用minDate和Maxdate
http://next.plnkr.co/edit/VyWzqYk426is0F1g
首先单击最短日期,以便它在日期选择器中解压输入 2020 的日期,然后按 Enter 键,然后您可以看到它禁用了日期。