Question

当用户从可用日期中选择日期时，24天后跟在可用日期中选择的日期显示在过期日期字段中，星期六和星期日日期被禁用。请找到演示here

我面临以下两个要求的困难。

1）当用户在“可用日期”字段中选择日期时，过期日期字段应启用不包括星期六和星期日的24天日期，并且不应显示今天以后的日期。如果用户选择2017-05-11为可用日期，在过期日期，日期应从2017-05-11到2017-05-19 启用（星期六和星期日被禁用）。

2）应禁用过期日期字段，当用户在可用日期字段中选择日期时，应仅启用过期日期字段，并允许用户选择日期。

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;
        };
    }
]);

Answer 1

使用ng-disabled，您可以检查是否先设置了可用日期。

ng-disabled="!AvailableDate"

但是，您也在控制器中预选今天的日期，因此在用户选择之前预先填充了AvailableDate。删除这意味着用户被迫选择可用日期，您不必通过调用$scope.ChangeExpiryMinDate($scope.AvailableDate);来计算初始过期日期

要求是：

到期日通常为可用日期+24天。
但是，如果超出今天的日期，则到期日为今天的日期。

我们可以使用Math.min来计算哪个更小：今天的日期或可能的计算日期，即可用日期+ 24天：

expiryMinDate = new Date(Math.min(expiryMinDate.setDate(expiryMinDate.getDate() + 23), new Date()));

我在这里创建了一个示例：https://jsfiddle.net/n12vfwph/11/

js代码根据条件检查禁用日期

1 个答案: