Question

我正在使用Angular daterangepicker。当弹出日历时，我使用主题显示“To”和“From”字段以及左侧的“Apply”和“Close”按钮。

压延：

我需要只显示突出显示的字段，以便用户只能从日历中选择日期并单击“应用”。可编辑的字段允许接受过去的日期。这是我需要限制的行为

Answer 1

您可以使用datepicker-options并在选项中设置最小日期，这样您的日历将不允许用户选择过去的日期。

'use strict';


angular.module('Authentication')

.controller('LoginController',
    ['$scope', '$rootScope', '$location', 'AuthenticationService',
    function ($scope, $rootScope, $location, AuthenticationService) {
        // reset login status
    AuthenticationService.ClearCredentials();

    $scope.login = function () {
        $scope.dataLoading = true;
        AuthenticationService.Login($scope.username, $scope.password, function(response) {
            if(response.success) {
                AuthenticationService.SetCredentials($scope.username, $scope.password);
                $location.path('/');
            } else {
                $scope.error = response.message;
                $scope.dataLoading = false;
            }
        });
    };
}]);

之后你需要以这种方式设置选项

<input type="text" datepicker-options="dateOptions" datepicker-popup="dd-MMMM-yyyy" />

Answer 2

我使用showCalender.daterangepicker事件只读取了“To”和“From”字段。因此，一旦显示了日历，我就将“只读”和“禁用”属性添加到“收件人”和“发件人”输入字段中。这样，它们现在就不可编辑了。

例如： -

$scope.options = {
                  eventHandlers: {
                        'showCalendar.daterangepicker':function(ev,picker)
                        {
                            angular.element("input[name='daterangepicker_end']").prop("readonly",true)
                            angular.element("input[name='daterangepicker_end']").prop("disabled",true)
                            angular.element("input[name='daterangepicker_start']").prop("readonly",true)
                            angular.element("input[name='daterangepicker_start']").prop("disabled",true)
                        }
                    },
                };

Angular DateRangePicker - 在“日历”弹出窗口中只读取“To”和“From”字段

2 个答案: