我正在开发angularjs应用程序。我有可用日期和过期日期选择器。当用户从“可用日期”字段中选择日期时,我想启用“过期日期”字段,以便用户可以在“过期日期”字段中选择日期。当用户在“过期日期”字段中选择日期时,应显示“showController”控制器中给出的文本。请找到演示here
请在用户在“过期日期”字段中选择日期时,建议如何提交或调用showController。
js code:
var demoApp = angular.module('demoApp', ["ui.bootstrap"]);
// create angular controller
demoApp.controller("demoController", ["$scope",
function($scope) {
var today = new Date();
$scope.AvailableDate = new Date();
$scope.ExpireDate = new Date();
$scope.dateFormat = 'yyyy-MM-dd';
$scope.availableDateOptions = {
formatYear: 'yy',
startingDay: 1,
minDate: "2016-03-12",
maxDate: today,
dateDisabled: function(data) {
var date = data.date;
var mode = data.mode;
return (mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ));
}
};
$scope.expireDateOptions = {
formatYear: 'yy',
startingDay: 1,
minDate: today,
maxDate: "2017-06-12",
dateDisabled: function(data) {
var date = data.date;
var mode = data.mode;
return (mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ));
}
};
$scope.availableDatePopup = {
opened: false
};
$scope.expireDatePopup = {
opened: false
};
$scope.ChangeExpiryMinDate = function(availableDate) {
if (availableDate != null) {
var availableDate = new Date(availableDate);
var expiryMinDate = angular.copy(availableDate);
expiryMinDate.setDate(expiryMinDate.getDate() + 28);
$scope.ExpireDate = availableDate;
$scope.expireDateOptions.minDate = availableDate;
$scope.expireDateOptions.maxDate = expiryMinDate;
} else {
delete $scope.ExpireDate;
}
};
$scope.ChangeExpiryMinDate($scope.AvailableDate);
$scope.OpenAvailableDate = function() {
$scope.availableDatePopup.opened = !$scope.availableDatePopup.opened;
};
$scope.OpenExpireDate = function() {
$scope.expireDatePopup.opened = !$scope.expireDatePopup.opened;
};
}
]);
当前过期日期显示自可用日期中所选日期的下一个工作日。
- 编辑 -
请找到更新的小提琴here。
我在上面显示的javascript代码中有另一个控制器,只要用户在Expire Date字段中选择日期就应该调用该控制器。在我的应用程序中,我有后端代码,当用户在Expired Date字段中选择日期时调用该代码。 / p>
<div ng-controller="showController">
<h3>
Submit the form and Show this text when user selects a date in Expire Date field..
</h1>
</div>