我正在使用angular-eonasdan-datetimepicker,这是eonasdan-datetimepicker的角度包装器。如何使结束日期始终大于开始日期。同时禁用之前的日期,直到结束日期日历中的开始日期。
我尝试使用on-change事件来更新UI,但它没有发生。事件被调用,但值不在更新。
在结束日期的onchange事件中:
$ scope.FormName.enddate = $ scope.startdate;
即
(FormName.elementName)=用户从模型中选择开始日期的值。
在jquery中它使用:
<script type="text/javascript">
$(function () {
$('#datetimepicker6').datetimepicker();
$('#datetimepicker7').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker6").on("dp.change", function (e) {
$('#datetimepicker7').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker7").on("dp.change", function (e) {
$('#datetimepicker6').data("DateTimePicker").maxDate(e.date);
});
});
</script>
角度包装器代码如下所示:
(function() {
'use strict';
var module = angular.module('ae-datetimepicker', []);
module.directive('datetimepicker', [
'$timeout',
function($timeout) {
return {
require: '?ngModel',
restrict: 'EA',
scope: {
options: '@',
onChange: '&',
onClick: '&'
},
link: function($scope, $element, $attrs, controller) {
$element.on('dp.change', function() {
$timeout(function() {
var dtp = $element.data('DateTimePicker');
controller.$setViewValue(dtp.date());
$scope.onChange();
});
});
$element.on('click', function() {
$scope.onClick();
});
controller.$render = function () {
if (!!controller) {
if (controller.$viewValue === undefined) {
controller.$viewValue = null;
}
else if (!(controller.$viewValue instanceof moment)) {
controller.$viewValue = moment(controller.$viewValue);
}
$element.data('DateTimePicker').date(controller.$viewValue);
}
};
$element.datetimepicker($scope.$eval($attrs.options));
}
};
}
]);
})();
任何领导都会非常有帮助。
答案 0 :(得分:0)
我想没有必要传递lib的来源:https://github.com/atais/angular-eonasdan-datetimepicker
我已经更新了lib,因此可以更容易/可以存档您请求的内容。
基本上,现在options
是一个对象而不是JSON String,fe:
vm.options = {
format: "DD.MM.YYYY",
maxDate: dateTo
};
正在监视和应用更改。 带演示的plunker在这里:http://plnkr.co/ZSjN8f