用户在日期选择器中选择日期时提交表单

时间:2017-05-22 04:48:11

标签: javascript angularjs

我正在开发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>

0 个答案:

没有答案