javascript - 在AngularJS中为jQuery datepicker动态设置最大限制

问题描述

在我的应用程序中，最大日期是根据一些逻辑计算的。日期是 JSON 日期。它将用于设置最大日期。

为了显示问题，我创建了一个 plunker 链接（http://plnkr.co/edit/KR2brhOXPMgZhbhafhex?p=preview）。

在我的示例max-date中，属性获取 JSON 日期

<input type="text" date-picker="" date-range="true" ng-model="Date" 
class="form-control input-sm" placeholder="MM/DD/YYYY" 
ng-required="true" name="Date" ng-pattern='datePattern'
max-date="dateLimit"/>

在我的控制器中，我尝试将 JSON 日期转换为 mm/dd/yy 日期字符串。为此，我创建了一个getcalculateddDate函数

在 chrome 开发工具控制台中评估我的日期

app.controller('MainCtrl', function($scope) {
    $scope.datePattern = /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/i
    var jsonDateExample = "/Date(1522728000000)/";
    $scope.dateLimit = getCalculatedDate(jsonDateExample );

    function getCalculatedDate(date) {
        var year = date.getFullYear();
        var month = (1 + date.getMonth()).toString();
        month = month.length > 1 ? month : '0' + month;
        var day = (date.getDate() - 1).toString();
        day = day.length > 1 ? day : '0' + day;
        return month + '/' + day + '/' + year;
    }    
});

我创建了一个指令来帮助我实现这一目标

app.directive('datePicker', function () {
return {
    require: 'ngModel',
    scope: {
        dateRange: '=',
        maxDate: '='
    },
    link: function (scope, el, attr, ngModel) {
        if (scope.dateRange !== undefined && scope.dateRange) {
            $(el).datepicker({
                maxDate: scope.maxDate,
                minDate: '-1M',
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
        else {
            $(el).datepicker({
                onSelect: function (dateText) {
                    scope.$apply(function () {
                        ngModel.$setViewValue(dateText);
                    });
                }
            });
        }
    }
};
});

标签： javascriptangularjsjsondatedatepicker

这不是一个有效的日期：（"/Date(1522728000000)/"而是一个字符串）并且绝对不是一个有效的 JSON（在这里查看）。

您可以做的是将对象传递给函数getCalculatedDate（Date请参阅此plunker）。例如像这样：

$scope.dateLimit = getCalculatedDate(new Date());

或者...从“JSON”中包含的值1522728000000（顺便说一句，它不是有效日期，请参阅Date.parse符合IETF 的 RFC 2822 时间戳和ISO8601 版本getCalculatedDate）在函数内部创建日期，如下所示（请参阅plunker）：

$scope.dateLimit = getCalculatedDate("2018-10-20T03:24:00");
// ...
function getCalculatedDate(dateNum) {
    var date = new Date(dateNum);
    // ... remainder omitted
}

其他阅读材料（感谢 OP，DotNetBeginner！）

javascript - 在AngularJS中为jQuery datepicker动态设置最大限制

问题描述

解决方案

推荐阅读